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

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>

Answer 2

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>