How to Use KeyboardAvoidingView in React Native for Smooth Keyboard Handling

Use KeyboardAvoidingView in React Native to automatically adjust your UI when the keyboard appears, preventing it from covering input fields. Wrap your screen or form components inside KeyboardAvoidingView and set the behavior prop to control how the view adjusts (e.g., padding, height, or position).

Syntax

The KeyboardAvoidingView component wraps your UI and adjusts its position or padding when the keyboard appears. It accepts these main props:

• behavior: Controls how the view adjusts. Options are padding, height, or position.
• keyboardVerticalOffset: Adds extra offset to the adjustment, useful for fixed headers.
• style: Styles for the container.

javascript

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

export default function App() {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={64}
      style={{ flex: 1 }}
    >
      {/* Your content here */}
    </KeyboardAvoidingView>
  );
}

Output

A container that moves or resizes when the keyboard appears to keep inputs visible.

Example

This example shows a simple form with a text input inside KeyboardAvoidingView. When the keyboard opens, the input stays visible and the layout adjusts smoothly.

javascript

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

export default function App() {
  const [text, setText] = useState('');

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={80}
      style={styles.container}
    >
      <View style={styles.inner}>
        <Text style={styles.header}>Enter your name</Text>
        <TextInput
          style={styles.textInput}
          placeholder="Type here"
          value={text}
          onChangeText={setText}
        />
        <Button title="Submit" onPress={() => {}} />
      </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: '#000', borderWidth: 1, marginBottom: 20, paddingHorizontal: 10 }
});

Output

A screen with a header, a text input, and a button. When the keyboard opens, the input moves up so it is not hidden.

Common Pitfalls

Common mistakes when using KeyboardAvoidingView include:

• Not setting the behavior prop correctly for the platform, causing no adjustment on Android or iOS.
• Forgetting to add keyboardVerticalOffset when you have fixed headers or navigation bars, which can cause inputs to still be hidden.
• Wrapping only part of the screen, so some inputs remain uncovered.
• Using KeyboardAvoidingView inside scrollable views without proper setup, which can cause layout issues.

Example of a wrong and right usage:

javascript

/* Wrong: Missing behavior prop, no offset */
<KeyboardAvoidingView style={{ flex: 1 }}>
  {/* Inputs here */}
</KeyboardAvoidingView>

/* Right: Set behavior and offset */
<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  keyboardVerticalOffset={80}
  style={{ flex: 1 }}
>
  {/* Inputs here */}
</KeyboardAvoidingView>

Quick Reference

KeyboardAvoidingView Props Cheat Sheet:

Prop	Description	Typical Values
behavior	How the view adjusts when keyboard appears	'padding', 'height', 'position'
keyboardVerticalOffset	Extra vertical offset to adjust for headers	Number (e.g., 80)
style	Styling for the container	Style object
enabled	Enable or disable the behavior	true or false

Key Takeaways

Wrap your screen or form inside KeyboardAvoidingView to prevent the keyboard from covering inputs.

Set the behavior prop to 'padding' for iOS and 'height' for Android for best results.

Use keyboardVerticalOffset to adjust for fixed headers or navigation bars.

Ensure KeyboardAvoidingView covers the entire screen or relevant input area.

Test on both iOS and Android devices as keyboard behavior differs.