How to fix KeyboardAvoidingView covering the last text input with React Native?

Sometimes, we want to fix KeyboardAvoidingView covering the last text input with React Native.

In this article, we’ll look at how to fix KeyboardAvoidingView covering the last text input with React Native.

How to fix KeyboardAvoidingView covering the last text input with React Native?

To fix KeyboardAvoidingView covering the last text input with React Native, we can set the keyboardVerticalOffset prop.

For instance, we write:

import * as React from 'react';
import { KeyboardAvoidingView, TextInput, Platform } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0;

  return (
    <KeyboardAvoidingView
      behavior="position"
      keyboardVerticalOffset={keyboardVerticalOffset}>
      <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>
  );
}

to check the platform the app is running on with Platform.OS.

Then we set the keyboardVerticalOffset accordingly.

As a result, the last text input should always be showing.

Conclusion

To fix KeyboardAvoidingView covering the last text input with React Native, we can set the keyboardVerticalOffset prop.