gotchatypescriptreact-nativeModerate

KeyboardAvoidingView: Preventing Keyboard from Covering Inputs

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

keyboardKeyboardAvoidingViewtext inputformiOS keyboardadjustResizepadding

Problem

The software keyboard obscures text inputs on forms, especially on iOS where the OS does not automatically scroll content up. KeyboardAvoidingView with wrong behavior prop causes content to jump or not move at all.

Solution

Use behavior='padding' on iOS and behavior='height' on Android, or use @react-native-community/viewpager or react-native-keyboard-aware-scroll-view for complex forms. Pair with ScrollView and keyboardShouldPersistTaps='handled'.

Why

iOS does not push content up when the keyboard appears — the app must handle this. Android with windowSoftInputMode=adjustResize (the default in Expo) does handle it, but this interacts poorly with KeyboardAvoidingView.

Gotchas

On Android with adjustResize, adding KeyboardAvoidingView causes double-shifting — remove it on Android
Absolute-positioned elements inside KeyboardAvoidingView do not move correctly
KeyboardAvoidingView must be the root view (not nested inside flex containers) for reliable behavior
Modal screens need their own KeyboardAvoidingView — the parent's does not apply

Code Snippets

Platform-appropriate KeyboardAvoidingView

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

export function LoginForm() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView keyboardShouldPersistTaps="handled">
        <TextInput placeholder="Email" />
        <TextInput placeholder="Password" secureTextEntry />
        <Button title="Login" />
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

Revisions (0)

No revisions yet.