KeyboardAvoidingView in React Native

Last updated on May 17, 2026

KeyboardAvoidingView is the built-in React Native component for moving or resizing content when the software keyboard appears. It is useful for simple forms, authentication screens, checkout fields, profile edits, and support flows.

The tricky part is that keyboard behavior differs by platform, navigation header, safe area, scroll container, modal presentation, and Android window settings. Treat keyboard handling as a screen-level layout decision, not a wrapper you add around the whole app.

Quick Answer

Wrap the form area with KeyboardAvoidingView, set behavior explicitly, combine it with a ScrollView for longer forms, and calculate keyboardVerticalOffset when a header or safe area sits above the screen.

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

export function EditProfileScreen() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={Platform.OS === 'ios' ? 88 : 0}
    >
      <ScrollView
        keyboardShouldPersistTaps="handled"
        contentContainerStyle={{ flexGrow: 1, padding: 20 }}
      >
        <TextInput placeholder="Display name" />
        <TextInput placeholder="Bio" multiline />
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

For local setup and troubleshooting, use Set Up Your React Native Development Environment and React Native Errors and Solutions.

Use It Per Screen, Not Around the Whole App

Keyboard behavior is contextual. A login form, chat composer, checkout screen, modal form, and full-screen map all need different handling. Wrapping the entire app can shift screens that do not need keyboard handling and create unexpected spacing bugs.

Use KeyboardAvoidingView around the smallest layout area that needs to stay visible.

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Pick the Right behavior

React Native supports three behaviors:

Behavior	Common use
padding	Often works well on iOS forms.
height	Useful when the container should shrink.
position	Useful for simple fixed-position layouts, but needs careful styling.

Set the prop explicitly. React Native notes that iOS and Android interact with this prop differently, so test both platforms rather than assuming one behavior will fit every screen.

Use keyboardVerticalOffset

If the screen has a native header, custom header, status bar, or top safe area, the keyboard calculation may need an offset:

const keyboardVerticalOffset = Platform.select({
  ios: 88,
  android: 0,
  default: 0,
});

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

The right number depends on your navigation header and layout. Test on screens with and without headers.

Combine With ScrollView for Long Forms

For forms that can exceed the visible area, use a scroll container:

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

export function SignupScreen() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView
        keyboardShouldPersistTaps="handled"
        contentContainerStyle={{ flexGrow: 1, padding: 24 }}
      >
        <View style={{ gap: 16 }}>
          <TextInput placeholder="Name" returnKeyType="next" />
          <TextInput placeholder="Email" keyboardType="email-address" />
          <TextInput placeholder="Password" secureTextEntry />
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

keyboardShouldPersistTaps="handled" helps buttons inside the scroll view remain usable while the keyboard is open.

Chat Composer Pattern

For chat, the message list and composer often need different handling than a standard form. Keep the composer at the bottom and test the list when the keyboard opens:

<KeyboardAvoidingView
  style={{ flex: 1 }}
  behavior={Platform.OS === 'ios' ? 'padding' : undefined}
  keyboardVerticalOffset={Platform.OS === 'ios' ? 88 : 0}
>
  <MessageList />
  <MessageComposer />
</KeyboardAvoidingView>

If your app uses Instamobile chat, review the Chat Module before changing message-list layout.

Android Notes

Android keyboard behavior can be affected by windowSoftInputMode, navigation mode, third-party keyboards, full-screen layouts, and device manufacturer differences. If KeyboardAvoidingView does not behave consistently on Android, check native window settings and test on a physical device.

For Android build and device issues, use Android and Gradle Errors.

Release Checklist

Before shipping a screen with keyboard input:

• test iOS and Android;
• test a small screen and a large screen;
• test hardware keyboard or simulator keyboard toggles where relevant;
• test long localized labels;
• test form validation errors while the keyboard is open;
• test submit buttons while an input is focused;
• test modals and bottom sheets separately;
• verify safe areas and bottom tabs are not double-counted.

For safe-area behavior, see Avoid Notch and Safe Area Issues in React Native.

Looking for a custom mobile application?

Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.

Get in Touch

FAQ

Should I wrap my whole app in KeyboardAvoidingView?

No. Use it on screens or form regions that need keyboard handling. Global wrappers often create layout bugs on screens without inputs.

Which behavior should I use?

Start with padding on iOS and height or native Android resizing on Android, then test the specific screen. There is no universal setting for every layout.

Why is there extra space after the keyboard closes?

Usually the layout is double-counting a safe area, tab bar, header offset, or Android resize behavior. Test the same screen with and without navigation headers to isolate the offset.

Useful Links

• Set Up Your React Native Development Environment
• React Native Errors and Solutions
• Chat Module
• Avoid Notch and Safe Area Issues in React Native
• React Native KeyboardAvoidingView docs