Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React native Modal, avoid resizing View when keyboard is opened (Android)

I'm using a react-native Modal, which contains a View. The View has some TextInput elements. When the keyboard pops up, the View elements all collapse to fit into the remaining space, but I don't want the View to change at all.

This does not happen for IOS. And also, it does not happen in non-modal Views for Android within the same app.

I have windowSoftInputMode="adjustPan" set in my android Manifest, but it doesn't seem to be applied on the Modal.

return( 
<ImageBackground source={require('./../images/IMG1.png')}
        style={{flex: 1}} imageStyle={{resizeMode: 'cover'}}>
  <View style={{flex: 1}}>
     (...)
     <Modal visible={this.state.modalVisible} animationType={'slide'} 
        presentationStyle={'fullScreen'}
        onRequestClose={() => this.closeModal()}>

        <ImageBackground source={require('./../images/IMG2.png')}
          style={{flex: 1}} imageStyle={{resizeMode: 'cover'}}>

        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
        <View style={{flex:1}}>

          (...)

          <View style={{flex:0.9, alignItems:'center', justifyContent: 'center', 
                                                  flexDirection: 'row'}}>
            <TextInput style={MyStyle.textInput}
                onChangeText={(myTitle) => this.setState({myTitle})}
                placeholder='Title'
            />
          </View>
like image 397
Jk33 Avatar asked Mar 05 '18 00:03

Jk33


People also ask

How do I stop react native modal from moving up when keyboard opens Android?

Try giving {position: 'absolute'} in its style props!

How do you move a view up when keyboard appears react native?

How do you control what keyboard pushes up React Native? Use android:windowSoftInputMode="adjustResize". KeyboardAvoidingView and other keyboard-related components don't work quite well if you have "adjustPan" set for your android:windowSoftInputMode in AndroidManifest.

How to make your react native app respond gracefully when the keyboard pops up?

The most simple solution, and the easiest to install, is KeyboardAvoidingView. It's a core component but it's also pretty simple in what it does. You can take the base code, which has the keyboard covering the inputs, and update that so that the inputs are no longer covered.


1 Answers

As a workaround, I ended up using a fixed height value for the Modal’s child View instead of flex. (Got it using Dimensions height). It seems to work as I expected.

like image 137
Jk33 Avatar answered Sep 18 '22 13:09

Jk33