KeyboardView not working on android (React-Native)-CodePudding

I have a screen with header and content, and in the content section I have a search and I want when I open the keyboard to raise all the view. I tried keyboardAvoidingView but it's not working for me. What I am doing wrong here ?

return (
<View style={styles.content}>
  <View style={styles.header}>
    ...
  </View>
  <KeyboardAvoidingView
    keyboardVerticalOffset={hp(30)}
    style={{flex: 1}}
    behavior="padding">
    ...
  </KeyboardAvoidingView>

</View>

);

and for the styling:

header: {
    height: hp(30),
    width: wp(100),
  },

container: {
    flexGrow: 1,
    backgroundColor: Colors.white,
    // borderTopLeftRadius: wp(7),
    // borderTopRightRadius: wp(7),
  },

and here is how it looks

CodePudding user response：

On Android, when you style the root View to flex:1, the application height will automatically reduce by the keyboard height when keyboard is shown.

And for using of KeyboardAvoidingView, this component should be put to an as high as possible level. Formally, you shouldn't place any sized component outside it to prevent some display problems. And to adapt this component, please make sure to check the compatibility both iOS and Android. It has different behavior on the two systems.

CodePudding user response：

You could try setting the behavior to be platform specific like so:

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
    // ...
</KeyboardAvoidingView>

It behaves slightly different on iOS and Android and this fixed my issues.

I've also seen react-native-keyboard-aware-scroll-view recommended on many posts regarding the same topic. It might be a more reliable thing to use according to other users but I haven't tried it.