[SOLVED] React Native KeyboardAvoidingView covers last text input

React Native KeyboardAvoidingView covers last text input

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>

Solution

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/>
    )