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: 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.

Answer 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> 

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