KeyboardAvoidingView

KeyboardAvoidingView is a component that automatically adjusts its height, position, or bottom padding based on the keyboard height to prevent the keyboard from covering important UI elements.

Usage

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

function LoginScreen() {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}
    >
      <TextInput
        placeholder="Email"
        style={styles.input}
      />
      <TextInput
        placeholder="Password"
        secureTextEntry
        style={styles.input}
      />
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  input: {
    height: 40,
    borderWidth: 1,
    marginBottom: 10,
    padding: 10,
  },
});

Props

'height' | 'position' | 'padding'

Specifies how the KeyboardAvoidingView should react to the keyboard appearance.

height: Adjusts the view’s height by shrinking it when the keyboard appears
position: Moves the entire view up using absolute positioning
padding: Adds bottom padding to push content up

Recommendation: Use 'padding' on iOS and 'height' on Android for best results.

ViewStyleProp

Style of the content container when behavior is 'position'. This wraps your children when using position mode.

boolean

default:"true"

Controls whether this KeyboardAvoidingView instance should take effect. Useful when multiple instances are on screen.

<KeyboardAvoidingView enabled={Platform.OS === 'ios'}>
  {/* Only avoid keyboard on iOS */}
</KeyboardAvoidingView>

number

default:"0"

Distance in pixels between the top of the user screen and the React Native view. Use this to account for navigation bars or other UI elements.

<KeyboardAvoidingView
  behavior="padding"
  keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
>
  {/* Offset by 64px for iOS navigation bar */}
</KeyboardAvoidingView>

ViewStyleProp

Style applied to the KeyboardAvoidingView container.

KeyboardAvoidingView also accepts all standard View props.

Behavior Modes Explained

Height Mode

Reduces the view’s height to avoid the keyboard. Best for Android.

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

Position Mode

Moves the view up when the keyboard appears. Useful for centered content.

<KeyboardAvoidingView
  behavior="position"
  contentContainerStyle={{ padding: 20 }}
>
  <TextInput placeholder="Input" />
</KeyboardAvoidingView>

Padding Mode

Adds bottom padding to push content up. Best for iOS with ScrollView.

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

Platform Differences

iOS

On iOS, the component listens to keyboardWillShow and keyboardWillHide events with animated transitions.

<KeyboardAvoidingView
  behavior="padding"
  keyboardVerticalOffset={88} // Account for navigation bar
>
  {children}
</KeyboardAvoidingView>

Android

On Android, the component listens to keyboardDidShow and keyboardDidHide events.

<KeyboardAvoidingView behavior="height">
  {children}
</KeyboardAvoidingView>

Common Patterns

With ScrollView

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{ flex: 1 }}
>
  <ScrollView>
    <TextInput placeholder="Field 1" />
    <TextInput placeholder="Field 2" />
    <TextInput placeholder="Field 3" />
  </ScrollView>
</KeyboardAvoidingView>

Form at Bottom of Screen

<KeyboardAvoidingView
  behavior="padding"
  style={{ flex: 1, justifyContent: 'flex-end' }}
>
  <View style={{ padding: 20 }}>
    <TextInput placeholder="Message" />
    <Button title="Send" onPress={handleSend} />
  </View>
</KeyboardAvoidingView>

Chat Input

<KeyboardAvoidingView
  behavior="padding"
  keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0}
  style={{ flex: 1 }}
>
  <FlatList data={messages} renderItem={renderMessage} />
  <View style={styles.inputContainer}>
    <TextInput style={styles.input} />
    <Button title="Send" />
  </View>
</KeyboardAvoidingView>

Troubleshooting

If the keyboard behavior isn’t working correctly:

Ensure KeyboardAvoidingView has flex: 1 or a defined height
Adjust keyboardVerticalOffset to account for navigation bars
Try different behavior values for your use case
On Android, ensure android:windowSoftInputMode is set to adjustResize in AndroidManifest.xml

Core Components

User Interface

List Components

Android Components

iOS Components

Usage

Props

Behavior Modes Explained

Height Mode

Position Mode

Padding Mode

Platform Differences

iOS

Android

Common Patterns

With ScrollView

Form at Bottom of Screen

Chat Input

Troubleshooting

​Usage

​Props

​Behavior Modes Explained

​Height Mode

​Position Mode

​Padding Mode

​Platform Differences

​iOS

​Android

​Common Patterns

​With ScrollView

​Form at Bottom of Screen

​Chat Input

​Troubleshooting

Usage

Props

Behavior Modes Explained

Height Mode

Position Mode

Padding Mode

Platform Differences

iOS

Android

Common Patterns

With ScrollView

Form at Bottom of Screen

Chat Input

Troubleshooting