How to prevent overlapping of keyboard with text input in React Native?

Did you ever come across a situation where you have an input field and when pressed, it got overlapped or hid behind keyboard?

This is a common issue which is both frustrating and signifies bad UI practice.

To prevent this overlapping of keyboard with views, React Native provides <KeyboardAvoidingView> component. You need to enclose the whole view under this component.

Code Example

import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, TouchableWithoutFeedback, Button, Keyboard  } from 'react-native';

const KeyboardAvoidingComponent = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          <Text style={styles.header}>Enter your name</Text>
          <TextInput placeholder="Username" style={styles.textInput} />
          <View style={styles.btnContainer}>
            <Button title="Submit" onPress={() => null} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-between"
  },
  header: {
    fontSize: 36,
  },
  textInput: {
    height: 40,
    borderColor: "#000000",
    borderBottomWidth: 1,
  },
  btnContainer: {
    backgroundColor: "white",
  }
});

export default KeyboardAvoidingComponent;

The output will look like this –

In the above image, you can see how the heading, text input field and button adjusted their positions when keyboard is visible.

There are few important points about the code –

1. Enclose the view in <KeyboardAvoidingView> that needs to be kept visible when keyboard is enabled. Here, we enclosed heading, input field and button.
2. Keep the style of view as flex. Because it will be easy for components to adjust their positions.
3. behavior prop of <KeyboardAvoidingView> component decides how to position the view elements. Whether height, position or padding needs to be altered. Both iOS and Android works differently and that’s why we used platform condition in this prop at line 7.
4. A whole screen click event is set using <TouchableWithoutFeedback> so that we can close the keyboard by tapping anywhere outside input field and button.

Live Demo

Conclusion

Overlapping of keyboard and views can be prevented in React Native using <KeyboardAvoidingView> component. This has multiple behavior settings like changing height of view, decreasing the padding and shifting position.