How to avoid keyboard pushing layout up on Android react-native

Question

I'm facing this issue for a few months and I still can't solve it. I have a text input at the bottom of the view that is supposed to rise up with the soft keyboard once tapped. Instead, the whole layout is pushed up and you can't see the upper part of it.

I tried many different keyboard spacer libraries but they all just push the TextInput even higher..

Screenshots: Without keyboard With keyboard

Here is my main View:

<View     style={{       flex: 1,       alignItems: 'stretch',       justifyContent: 'space-between',       overflow: 'hidden',       backgroundColor: Colors.darkBlue     }}   >     {/* Header */}     <View       style={{         flexDirection: 'row',         alignItems: 'stretch',         height: 300       }}>       {/* Question bubble */}       { (this.state.question && this.state.question !== '') ? (           <TouchableOpacity             style={{                 flex: 1,                 flexDirection: 'row',                 backgroundColor: 'transparent',                 alignItems: 'stretch',                 paddingRight: QUESTION_SPEAKER_RADIUS               }}           >             <View               style={{                   flex: 1,                   alignSelf: 'stretch',                   alignItems: 'center',                   justifyContent: 'center',                   backgroundColor: 'white',                 }}             >               <Text>                 {this.state.question}               </Text>             </View>           </TouchableOpacity>         ) : null       }     </View>     <KeyboardInput       style={{}}       onClose={() => this.setState({ displayMode: DISPLAY_MODES.homeEmpty })}       onConfirm={(text) => this.onConfirmText(text) }     />   </View> 

Here is KeyboardInput:

<View       style={{         alignSelf: 'stretch',         flexDirection: 'row',         alignItems: 'center',         justifyContent: 'flex-end',         backgroundColor: Colors.pink,         borderColor: Colors.lime,         borderTopWidth: 4,         padding: 6,       }}>       <View         style={{           flex: 1,           borderRadius: 6,           padding: 0,           backgroundColor: Colors.white,           alignItems: 'stretch',         }}       >         <TextInput           placeholder={Strings.child_keyboard_placeholder}           value={this.state.messageTextInput}           onChangeText={(text) => this.setState({messageTextInput: text})}           style={{             height: 50,             marginLeft: 10,             marginRight: CONFIRM_BUTTON_SIZE / 2           }}           underlineColorAndroid='transparent'           numberOfLines={2}           maxLength={70}           autoCorrect={false}           returnKeyType='next'         />       </View>     </View> 

Using RN 0.35 on Android.

Answer 1

The problem here is that you have in your AndroidManifest.xml:

windowSoftInputMode="adjustResize"; 

Change it to:

windowSoftInputMode="adjustPan" 

Note: after this change you'll need run ./gradlew clean in android folder and react-native run-android in your project directory