React Native KeyboardAvoidingView - Component hidden behind Keyboard during Text Input

'Input Field hidden behind keyboard' is one of the common problem faced by mobile app developers including react native. Basically, when your input field is positioned low on screen and you click on it and keyboard pops up right on top of the field blocking the view.

To fix this, the standard approach is to scroll the input field upwards automatically so that it is no longer hidden behind the keyoard.

On React Native, earlier it was not that easy to get his effect. But later, facebook released the KeyboardAvoidingView as part of react native to solve this problem.

React Native KeyboardAvoidingView

KeyboardAvoidingView automatically adjusts its position or bottom padding based on the keyboard position to handle this problem.

Here is a sample example code on how to use it in your views

import {ScrollView, Text, TextInput, View, KeyboardAvoidingView} from "react-native";

<KeyboardAvoidingView behavior='padding'>
  <View style={styles.textInputContainer}>
    <TextInput
      value={this.state.data}
      style={styles.textInput}
      onChangeText={this.handleChangeData}
    />
  </View>
</KeyboardAvoidingView>