KeyboardAvoidingView

This component will automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed.

Why another KeyboardAvoidingView is needed?

This new KeyboardAvoidingView maintains the familiar React Native API but ensures consistent behavior and animations on both iOS and Android platforms. Unlike the existing solution, which primarily caters to iOS, this component eliminates platform discrepancies, providing a unified user experience. By reproducing the same animations and behaviors on both platforms, it simplifies cross-platform development, meets user expectations for consistency, and enhances code maintainability. Ultimately, it addresses the need for a reliable and uniform keyboard interaction solution across different devices.

Below is a visual difference between the implementations (the animation is 4x times slower for better visual perception).

Default react-native implementation on Android	Implementation from react-native-keyboard-controller with better animations

Found a bug? Help the project and report it!

If you found any bugs or inconsistent behavior comparing to react-native implementation - don't hesitate to open an issue. It will help the project 🙏

Also if there is any well-known problems in original react-native implementation which can not be fixed for a long time and they are present in this implementation as well - also feel free to submit an issue. Let's make this world better together 😎

Example

import React from "react";
import {
  Text,
  TextInput,
  TouchableOpacity,
  View,
  StyleSheet,
} from "react-native";
import { KeyboardAvoidingView } from "react-native-keyboard-controller";

export default function KeyboardAvoidingViewExample() {
  return (
    <KeyboardAvoidingView
      behavior={"padding"}
      contentContainerStyle={styles.container}
      keyboardVerticalOffset={100}
      style={styles.content}
    >
      <View style={styles.inner}>
        <Text style={styles.heading}>Header</Text>
        <View>
          <TextInput placeholder="Username" style={styles.textInput} />
          <TextInput placeholder="Password" style={styles.textInput} />
        </View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.text}>Submit</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    maxHeight: 600,
  },
  heading: {
    fontSize: 36,
    marginBottom: 48,
    fontWeight: "600",
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-between",
  },
  textInput: {
    height: 45,
    borderColor: "#000000",
    borderWidth: 1,
    borderRadius: 10,
    marginBottom: 36,
    paddingLeft: 10,
  },
  button: {
    marginTop: 12,
    height: 45,
    borderRadius: 10,
    backgroundColor: "rgb(40, 64, 147)",
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "500",
    fontSize: 16,
    color: "white",
  },
});

Props

behavior

Specify how to react to the presence of the keyboard. Could be one value of:

• position
• padding
• height

contentContainerStyle

The style of the content container (View) when behavior is position.

enabled

A boolean prop indicating whether KeyboardAvoidingView is enabled or disabled. Default is true.

keyboardVerticalOffset

This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases. Default is 0.