The structure of the app is fairly simple: A searchbar, a listview and react-native-tabs at the bottom. The problem: If I click on the searchbar on Android it pushes the whole app up, so I see the tabs directly over the keyboard. But on iOS the keyboard overlays the whole app, without pushing anything up. Is there any way to control that?
I'm happy to share code / screenshots if the question isn't clear.
Thanks
edit:
<View style={{flex:1, backgroundColor:'#f2f2f2'}}> <ListView dataSource={this.state.dataSource} renderRow={this.renderSearchResults.bind(this)} style={styles.listView}/> <KeyboardAvoidingView style={styles.addQuestionBar} behavior={'position'}> <Text> Don't see your question? </Text> <TouchableOpacity> <Text> Add it </Text> </TouchableOpacity> </KeyboardAvoidingView> </View>
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. xml . Instead, you should use "adjustResize" and have a wonderful life.
It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height.
Set android:windowSoftInputMode="adjustPan"
in your manifest file, and it will work as you expect.
E.g.
<application android:name=".MainApplication" android:allowBackup="true" ... <activity android:name=".MainActivity" android:label="@string/app_name" ... android:windowSoftInputMode="adjustPan"> ... </activity> ... </application>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With