How to move screen up on textinput in react native

In React Native applications, when the text input is positioned lower on the screen, the keyboard that appears may obstruct the input area. To address this issue, you can use the following methods:

Using the KeyboardAvoidingView Component

React Native offers a built-in component named KeyboardAvoidingView that automatically adjusts the position of internal views to prevent obstruction by the keyboard.

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

const ExampleScreen = () => {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <TextInput style={styles.textInput} placeholder="Here input content"/>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  textInput: {
    borderWidth: 1,
    borderColor: 'gray',
    padding: 10,
    margin: 20,
  },
});

export default ExampleScreen;

Using the ScrollView Component

If your view already includes a ScrollView, ensure that TextInput is a child of ScrollView and set the keyboardShouldPersistTaps property to handled or always to allow users to tap other parts of the screen without closing the keyboard when it is displayed.

jsx
import React from 'react';
import { ScrollView, TextInput, StyleSheet } from 'react-native';

const ExampleScreen = () => {
  return (
    <ScrollView
      style={styles.container}
      keyboardShouldPersistTaps='handled'
    >
      <TextInput style={styles.textInput} placeholder="Here input content"/>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textInput: {
    borderWidth: 1,
    borderColor: 'gray',
    padding: 10,
    margin: 20,
    marginTop: 600, // To position the input field near the bottom of the screen to simulate being obstructed
  },
});

export default ExampleScreen;

Using Third-Party Libraries

react-native-keyboard-aware-scroll-view is a popular third-party library specifically designed to solve keyboard obstruction issues for input fields. It provides KeyboardAwareScrollView and KeyboardAwareFlatList components, which are straightforward to implement.

jsx
import React from 'react';
import { TextInput } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const ExampleScreen = () => {
  return (
    <KeyboardAwareScrollView>
      <TextInput placeholder="Here input content"/>
    </KeyboardAwareScrollView>
  );
};

export default ExampleScreen;

When using this library, simply wrap your layout around it, and it will automatically handle screen scrolling issues.

Summary

There are multiple approaches to avoid keyboard obstruction for text input, and you can select the appropriate method based on your requirements and layout. During development, you may need to combine various methods to achieve the best user experience.