React Native KeyboardAvoidingView covers last text input

Question

I'm using React Native's Keyboard Avoiding View with the behavior set to padding (testing on Android).

I have multiple TextInputs on my screen. When I click the final TextInput, the keyboard covers it. I am now able to scroll down due to padding added from KeyboardAvoidingView, but it would be ideal to have it auto scroll on focus.

<Content>
  <KeyboardAvoidingView behavior='padding'>
    <TextInput placeholder='Example 1' />
    <TextInput placeholder='Example 2' />
    <TextInput placeholder='Example 3' />
    <TextInput placeholder='Example 4' />
    <TextInput placeholder='Example 5' />
    <TextInput placeholder='Example 6' />
    <TextInput placeholder='Example 7' />
  </KeyboardAvoidingView>
</Content>

Answer 1

there is prop called keyboardVerticalOffset that you can pass to the KeyboardAvoidingView that will change how much the keyboard moves past the textInput. Sample of my code:

const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0

    return (
      <KeyboardAvoidingView behavior='position' keyboardVerticalOffset={keyboardVerticalOffset}>
        <ListView .../>
      <KeyboardAvoidingView/>
    )

Answer 2

Depending on platform, Android or IOS, implementation can be vary a little. This is how I did.

Add android:windowSoftInputMode="adjustResize" at AndroidManifest.xml,

 <activity
    android:name=".MainActivity"
    android:launchMode="singleTask"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">

 </activity>

In your container

    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : null}
      keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}>
      <ScrollView>
        {...}
      </ScrollView>
    </KeyboardAvoidingView>

keyboardVerticalOffset tells how much the keyboard moves past the textInput.

Answer 3

react-native-keyboard-aware-scroll-view

I found it super simple to use and it worked great in both Android and iOS.

It supports older versions of RN too.

Initially I tried the KeyboardAvoidingView but on IOS not even

behavior='position' with keyboardVerticalOffset worked properly.

They used to overlap some content in a strange way.

I have:

RN 0.53.3
react-native-keyboard-aware-scroll-view 0.6.0

I added a few more details about my use case here:

https://stackoverflow.com/a/51151496/1979861