KeyboardAvoidingView with ScrollView

Question

I am sort of new to react native and have one question that I did not find in react native documentation.

I am looking into this component KeyboardAvoidingView

Answer 1

I also tried to find the solution on the internet, but I figured it out myself. I was able to make keyboardAvoidingView to work with ScrollView on the iPhone SE simulator.

I used padding type position, with keyboardVerticalOffset set to some higher value. I hope this helps everybody who is trapped in this situation.

render() {
  return (
    <View style={...}>
      <ScrollView>
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          keyboardVerticalOffset={100}
          behavior={"position"}
        >
          <TextInput style={styles.editInput} ... />
        </KeyboardAvoidingView>
      </ScrollView>
    </View>
  );
}

Answer 2

In my case I used: https://github.com/APSL/react-native-keyboard-aware-scroll-view.

<KeyboardAwareScrollView>
  ....
  <MyContainerComponent>
    ....
    <MyFormComponentWithInputs />
  </MyContainerComponent>
</KeyboardAwareScrollView>

It supports older RN versions too.

My text input was somewhere hidden deep is some custom child component of the ScrollView but the package worked great for both Android and iOS

Answer 3

I ran into the same issue, though I had a different approach that basically will calculate and positioning (using translateY) the view when the keyboard appears.

I have published the solution on github and NPM react-native-spacer.

Answer 4

The below code solved my issue

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center'}} behavior={Platform.OS == "ios" ? "padding" : "height"} enabled   keyboardVerticalOffset={150}>
 {renderForm()}
  </KeyboardAvoidingView>

);

// where renderForm render the long form with ScrollView

Answer 5

After so many attempts, this is the one that works fine both for iOS & Android:

<KeyboardAvoidingView
    style={styles.keyboard}
    behavior={Platform.OS == "ios" ? "padding" : "height"}
    enabled
    keyboardVerticalOffset={10}
>
   <ScrollView>
   ...
   </ScrollView>
</KeyboardAvoidingView>

As for the style:

const styles = StyleSheet.create({
   keyboard: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
   }
});

Answer 6

This is what my solution would be, it works and scrolls automatically on focus input. I tried this on Expo, hope it helps.

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center',}} behavior="padding" enabled   keyboardVerticalOffset={100}>
    <ScrollView>
        <View style={Styles.row}>
            //your view
        </View>
    </ScrollView>
</KeyboardAvoidingView>