React Native KeyboardAvoidingView

Summary: in this tutorial, you will learn how to use the React Native KeyboardAvoidingView component to enhance the user experience for your apps.

Introduction to the React Native KeyboardAvoidingView Component

When users focus on a TextInput, a virtual keyboard appears, which may hide the input field and other UI components. This can create a poor user experience as they won’t be able to see or enter data into the form properly.

For example, in the following app, the virtual keyboard will completely hide the TextInput component on iOS:

import { StyleSheet, Text, View, SafeAreaView, TextInput } from 'react-native'

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.title}>JavaScriptTutorial.net</Text>
            <View style={styles.field}>
                <Text style={styles.label}>Name:</Text>
                <TextInput placeholder="Enter your name" style={styles.input} />
            </View>
        </SafeAreaView >
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 16,
    },
    title: {
        fontSize: 28,
        textAlign: 'center',
        marginBottom: 16,
    },
    field: {
        marginTop: 'auto',
    },
    label: {
        marginBottom: 8,
        fontSize: 16,
    },
    input: {
        height: 40,
        marginBottom: 16,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 8,
        padding: 8,
        fontSize: 16,
    },

});

export default App;Code language: JavaScript (javascript)

Switch to iOS and move the focus to the TextInput, you’ll notice the issue:

To fix this issue, you can use the KeyboardAvoidingView component to keep the TextInput remains visible when the keyboard appears.

The KeyboardAvoidingView component will automatically adjust its height, position, or bottom padding based on the height of the virtual keyboard to remain visible while the virtual keyboard is displayed.

To use the KeyboardAvoidingView component:

First, import the KeyboardAvoidingView from react-native library:

import { KeyboardAvoidingView } from 'react-native';Code language: JavaScript (javascript)

Second, wrap the area you want to remain visible while the virtual keyboard is displayed in the KeyboardAvoidingView component:

<KeyboardAvoidingView>
   {/* UI components */}
</KeyboardAvoidingView>Code language: JavaScript (javascript)

The KeyboardAvoidingView has an important prop called behavior that defines how it should react to the presence of the virtual keyboard. You can use this prop to specify how KeyboardAvoidingView should behave based on different platforms such as iOS and Android.

Here’s the recommendation from the React Native team:

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
</KeyboardAvoidingView>Code language: HTML, XML (xml)

To fix our issue with the app, we can wrap the form inside a KeyboardAvoidingView as follows:

import { StyleSheet, Text, View, SafeAreaView, TextInput, KeyboardAvoidingView, Platform } from 'react-native'

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={styles.container}>
                <Text style={styles.title}>JavaScriptTutorial.net</Text>
                <View style={styles.field}>
                    <Text style={styles.label}>Name:</Text>
                    <TextInput placeholder="Enter your name" style={styles.input} />
                </View>
            </KeyboardAvoidingView>
        </SafeAreaView >
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 16,
    },
    title: {
        fontSize: 28,
        textAlign: 'center',
        marginBottom: 16,
    },
    field: {
        marginTop: 'auto',
    },
    label: {
        marginBottom: 8,
        fontSize: 16,
    },
    input: {
        height: 40,
        marginBottom: 16,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 8,
        padding: 8,
        fontSize: 16,
    },

});

export default App; Code language: JavaScript (javascript)

When you switch to iOS and focus on the TextInput, the virtual keyboard appears and pushes the TextInput component up, ensuring the TextInput remains visible for entering data:

Summary

• Use the KeyboardAvoidingView component to wrap your form element, ensuring that the form remains visible when the virtual keyboard appears.