Skip to main content
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

​
behavior
'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.
​
contentContainerStyle
ViewStyleProp
Style of the content container when behavior is 'position'. This wraps your children when using position mode.
​
enabled
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>
​
keyboardVerticalOffset
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>
​
style
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:
  1. Ensure KeyboardAvoidingView has flex: 1 or a defined height
  2. Adjust keyboardVerticalOffset to account for navigation bars
  3. Try different behavior values for your use case
  4. On Android, ensure android:windowSoftInputMode is set to adjustResize in AndroidManifest.xml

Build docs developers (and LLMs) love

Get started for freeTalk to us