Getting Started with Mobile App Development with React Native/

...

/

KeyboardAvoidingView

KeyboardAvoidingView

Learn how to prevent components from hiding beneath the virtual keyboard.

We'll cover the following...

The KeyboardAvoidingView component in React Native prevents the current view of the application from hiding beneath the virtual keyboard. Without this component, if the user taps on an input field, the virtual keyboard will be opened and the input field will be hidden beneath it. Now the user won’t be able to see what and where they are typing. This creates a bad user experience.

Press + to interact
Mobile application representing the behavior of the KeyboardAvoidingView component
Mobile application representing the behavior of the KeyboardAvoidingView component

Usage

To implement and use the KeyboardAvoidingView component, we first have to import it from the react-native library.

Press + to interact
import { KeyboardAvoidingView } from 'react-native';

Once the KeyboardAvoidingView component has been imported, we can use it inside our application using the <KeyboardAvoidingView></KeyboardAvoidingView> tag.

Press + to interact
import React from "react";
import { SafeAreaView, KeyboardAvoidingView, TextInput } from "react-native";
const App = () => {
  return (
    <SafeAreaView>
      <KeyboardAvoidingView>
        <TextInput
          placeholder="Enter your email address"
        />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};
export default App;

Note: We have to nest the children components inside the ...