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.

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>

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

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>

<View style={{flex:1}}>
   <KeyboardAvoidingView
     style={{flex:1}}
     behavior={Platform.OS === 'ios' ? 'position' : null}
     keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
   >
    <ScrollView> // no need to put here style={{flex:1}}
      <TextInput />
      <TextInput />
      <TextInput />
      <TextInput />
    </ScrollView>
  </KeyboardAvoidingView>
</View>

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

The below code solved my issue

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

I was also facing this issue ,spent more than 4 hours to figure out this issue and lastly find this solution.

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center'}} behavior="position" enabled   keyboardVerticalOffset={200}>
<ScrollView>
  <Text style={{padding:10,fontSize:42}}>Text 1</Text>
  <Text style={{padding:10,fontSize:42}}>Text 2</Text>
  <Text style={{padding:10,fontSize:42}}>Text 3</Text>
  <Text style={{padding:10,fontSize:42}}>Text 4</Text>
  <Text style={{padding:10,fontSize:42}}>Text 5</Text>
  <Text style={{padding:10,fontSize:42}}>Text 6</Text>
  <Text style={{padding:10,fontSize:42}}>Text 7</Text>
  <Text style={{padding:10,fontSize:42}}>Text 8</Text>
  <Text style={{padding:10,fontSize:42}}>Text 9</Text>
  <Text style={{padding:10,fontSize:42}}>Text 10</Text>
  <Text style={{padding:10,fontSize:42}}>Text 11</Text>
  <Text style={{padding:10,fontSize:42}}>Text 12</Text>
  <TextInput style={styles.input}
    placeholder="Type some text...">
  </TextInput>
  </ScrollView>
</KeyboardAvoidingView>

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

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.

Not the perfect behavior in ios platform , use KeyboardAwareScrollView instead of KeyboardAvoidingView.