KeyboardAvoidingView with ScrollView

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: https://facebook.github.io/react-native/docs/keyboardavoidingview.html

Question is simple - has anyone to get KeyboardAvoidingView to work nicely with ScrollView? I have many TextInputs in one component (sum of TextInputs height is bigger then device height), and once the keyboard appears, I have various issues..
If I use View instead of ScrollView then everything is fine, but I can't use it, since I need more space than the device height.. I Couldn't find anything about Scroll in the KeyboardAvoidingView documentation.

Thanks.

Solution 1:

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>

Solution 2:

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>
  );
}

Solution 3:

It looks like facebook has not yet implemented a solution for scrollViews. But I have found solution made by Wix, react-native-keyboard-aware-scrollview that works like it should :)

npm i react-native-keyboard-aware-scrollview --save

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scrollview';

<KeyboardAwareScrollView style={styles.container}>
  <TextInput style={styles.textInput} placeholder={'My Input'} />
</KeyboardAwareScrollView>