How to avoid keyboard pushing layout up on Android react- native

When developing Android applications with React Native, a common issue is that when the user taps an input field, the keyboard appears and pushes the page upward, potentially disrupting the layout, especially when the input field is positioned at the bottom of the page. To address this, we can use the following approaches:

1. Using the KeyboardAvoidingView Component

React Native provides a built-in component, KeyboardAvoidingView, which automatically handles the issue of the keyboard covering input fields. Here's how to implement it:

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

const Example = () => {
  return (
    <KeyboardAvoidingView style={styles.container} behavior="padding">
      <TextInput style={styles.input} placeholder="Enter text"/>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginHorizontal: 20,
  },
});

export default Example;

In this example, the behavior property can be set to 'height', 'position', or 'padding' to accommodate various scenarios.

2. Adjusting AndroidManifest.xml

Another approach is to set the windowSoftInputMode attribute for the relevant Activity in AndroidManifest.xml. This attribute determines how the interface adjusts when the keyboard is displayed:

xml
<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:windowSoftInputMode="adjustResize">
    <!-- Configuration and other settings -->
</activity>

adjustResize adjusts the screen size to accommodate the keyboard, while adjustPan shifts the view to keep the focused element visible.

3. Using Third-Party Libraries

If built-in solutions are insufficient, consider using third-party libraries like react-native-keyboard-aware-scroll-view. This library provides a scrollable view that automatically adjusts to avoid obstruction:

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

const Example = () => {
  return (
    <KeyboardAwareScrollView>
      <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />
    </KeyboardAwareScrollView>
  );
};

Using this library offers greater flexibility for handling complex layouts and interactive scenarios.

Summary

Each method has specific use cases. Select based on your requirements and context. For instance, for simple forms, KeyboardAvoidingView may suffice; for more complex pages, adjusting AndroidManifest.xml or using third-party libraries can enhance user experience.