Skip to main content

KeyboardAvoidingView in React Native

· 3 min read
Beniamin Marcu
Full Stack Developer
Last updated on September 1, 2023

The KeyboardAvoidingView works like a charm on iOS, but it can be a bit hit or miss on Android. This is mainly due to the varying keyboard heights and behaviors across different Android devices. You might find yourself needing to mix it with other solutions or tweak how you use it for Android.

Note:​

The KeyboardAvoidingView behavior may be perfect on iOS, but it can be a bit unpredictable on Android, especially given Android’s custom keyboard height and behavior for different devices. You might need to combine it with other solutions or adjust its use for Android.

Setting up React Native Project​

If you haven't set up a React Native project yet:

npx react-native init KeyboardApp
cd KeyboardApp

Make sure you have the React Native CLI installed and that you have an emulator or device ready to go.

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

Get the Mega Bundle

Basic Usage​

iOS​

For iOS, you typically set the behavior prop to “padding.” Here’s a simple example:

import React from 'react';
import { View, TextInput, Button, `KeyboardAvoidingView`, StyleSheet, Platform } from 'react-native';
function App() {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : null}
    >
      <TextInput
        placeholder="Type here"
        style={styles.input}
      />
      <Button title="Submit" onPress={() => {}} />
    </KeyboardAvoidingView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 10
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10
  }
});

export default App;

In this case, when the TextInput is focused, the KeyboardAvoidingView will shift its position to keep the TextInput visible above the keyboard.

Android​

On Android, the behavior is usually set to “height” or can even be left as null. Additionally, Android has a special prop called keyboardVerticalOffset, which is often necessary to account for the height of a navigation header or any other UI elements that sit above your input.

<KeyboardAvoidingView
  style={styles.container}
  behavior={Platform.OS === "android" ? "height" : "padding"}
  keyboardVerticalOffset={Platform.OS === "android" ? 75 : 0}
>

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

Get the Mega Bundle

Advanced Use Case: Multiple TextInputs​

When you have multiple TextInputs, using KeyboardAvoidingView can get a bit tricky:

function App() {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <TextInput placeholder="Type here" style={styles.input} />
      <TextInput placeholder="Type more here" style={styles.input} />
      <Button title="Submit" onPress={() => {}} />
    </KeyboardAvoidingView>
  );
}

With this setup, whenever any TextInput is focused, the KeyboardAvoidingView will adjust accordingly.

Troubleshooting and Tips​

  1. Nested Views: If your TextInput is inside several nested views, make sure the parent views have a flex value set. Otherwise, you might run into issues with the view not adjusting properly.

  2. Third-party Libraries: Sometimes, using third-party libraries like react-navigation may require you to add extra offsets using the keyboardVerticalOffset prop.

  3. Test Across Devices: Especially on Android, due to the wide range of devices and keyboard heights, always test on multiple devices to ensure everything behaves as expected.

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

Conclusion​

The KeyboardAvoidingView is a useful component in React Native for managing keyboard interactions. While it works smoothly on iOS, it might need some extra adjustments on Android. Always remember to test across different devices to get the best results.