KeyboardAvoidingView in React Native

Introduction

KeyboardAvoidingView helps keep your app's content visible when the keyboard appears. It moves or resizes parts of the screen so users can still see and interact with inputs.

When you have text inputs near the bottom of the screen and the keyboard might cover them.

When you want to prevent the keyboard from hiding buttons or fields users need to tap.

When you want a smooth user experience without manual scrolling after the keyboard opens.

Syntax

React Native

import { KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{ flex: 1 }}
>
  {/* Your content here */}
</KeyboardAvoidingView>

behavior controls how the view adjusts: 'padding' moves content up, 'height' resizes the view.

Use Platform.OS to set behavior differently for iOS and Android for best results.

Examples

Moves the content up by adding padding when the keyboard appears.

React Native

<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
  <TextInput placeholder="Type here" />
</KeyboardAvoidingView>

Resizes the view height to avoid the keyboard.

React Native

<KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
  <TextInput placeholder="Type here" />
</KeyboardAvoidingView>

Sets behavior based on platform for better compatibility.

React Native

import { KeyboardAvoidingView, Platform, TextInput } from 'react-native';

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{ flex: 1 }}
>
  <TextInput placeholder="Enter text" />
</KeyboardAvoidingView>

Sample App

This app shows a text input centered on the screen. When the keyboard opens, the KeyboardAvoidingView moves the input up so it stays visible.

React Native

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

export default function App() {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}
    >
      <View style={styles.inner}>
        <Text style={styles.header}>Enter your name</Text>
        <TextInput
          placeholder="Name"
          style={styles.textInput}
        />
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: 'center'
  },
  header: {
    fontSize: 24,
    marginBottom: 24
  },
  textInput: {
    height: 40,
    borderColor: '#000000',
    borderBottomWidth: 1,
    marginBottom: 36
  }
});

Important Notes

Always wrap your inputs inside KeyboardAvoidingView to improve usability on mobile devices.

Test on both iOS and Android because keyboard behavior differs between platforms.

Combine with ScrollView if you have many inputs to allow scrolling when keyboard is open.

Summary

KeyboardAvoidingView helps keep inputs visible when the keyboard appears.

Use the behavior prop to control how the view adjusts.

Set behavior based on platform for best user experience.