How to remove extra space below the TextInput in the KeyboardAvoidingView with React Native?

Sometimes, we want to remove extra space below the TextInput in the KeyboardAvoidingView with React Native.

In this article, we’ll look at how to remove extra space below the TextInput in the KeyboardAvoidingView with React Native.

How to remove extra space below the TextInput in the KeyboardAvoidingView with React Native?

To remove extra space below the TextInput in the KeyboardAvoidingView with React Native, we shoule make KeyboardAvoidingView a child of ScrollView.

For instance, we write:

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

export default function App() {
  return (
    <ScrollView>
      <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
        <ScrollView>
          <TextInput />
          <TextInput />
          <TextInput />
          <TextInput />
          <TextInput />
          <TextInput />
        </ScrollView>
      </KeyboardAvoidingView>
    </ScrollView>
  );
}

to wrap the ScrollView around the KeyboardAvoidingView to remove extra space below the TextInputs.

Conclusion

To remove extra space below the TextInput in the KeyboardAvoidingView with React Native, we shoule make KeyboardAvoidingView a child of ScrollView.