Seamless & Animated Keyboard-Avoiding Experience in React Native

Description:

React Native Keyboard Experience is a React Native library that creates animated keyboard avoidance views for iOS and Android applications.

It automatically adjusts layout when the keyboard appears or disappears. This prevents content from being obscured by the keyboard during text input.

It is ideal for developers building forms, chat interfaces, or any screen with multiple text inputs.

Features

• 🔧 Cross-Platform Consistency: Provides uniform keyboard avoidance behavior on both iOS and Android devices.
• 🎬 Smooth Animations: Implements customizable animation timing for keyboard transitions.
• 📏 Flexible Padding: Allows adjustment of keyboard padding with platform-specific default values.
• 🔄 Component Compatibility: Works reliably with ScrollView, FlatList, and SectionList components.

Use Cases

• Form-Heavy Applications: Prevents keyboard obstruction in screens with multiple input fields.
• Chat Interfaces: Maintains message input visibility during keyboard interactions.
• Data Entry Screens: Ensures form fields remain accessible when entering information.
• Mobile Applications: Supports any React Native app requiring text input on touchscreen devices.

How to Use It

1. Install react-native-keyboard-experience in your project using npm.

npm install react-native-keyboard-experience

2. Import the CustomKeyboardAvoidingView component into your screen. Wrap the components that you want to be adjusted when the keyboard is shown with CustomKeyboardAvoidingView.

Here is an example of a simple login form:

import React from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';
import CustomKeyboardAvoidingView from 'react-native-keyboard-experience';
const LoginScreen = () => {
  return (
    <CustomKeyboardAvoidingView style={styles.container} keyboardPadding={-100} duration={300}>
      <View style={styles.formContainer}>
        <TextInput
          placeholder="Email"
          style={styles.input}
        />
        <TextInput
          placeholder="Password"
          secureTextEntry
          style={styles.input}
        />
        <Button title="Login" onPress={() => {}} />
      </View>
    </CustomKeyboardAvoidingView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  formContainer: {
    width: '100%',
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    paddingHorizontal: 10,
  },
});
export default LoginScreen;

In this example, the keyboardPadding is adjusted to provide less space when the keyboard is up, and the animation duration is set to 300 milliseconds for a slightly faster transition.

3. The CustomKeyboardAvoidingView component accepts the following props:

• children: The content to be rendered inside the view. This is a required prop.
• style: Custom styles to be applied to the container view. This is an optional prop.
• keyboardPadding: Additional padding to apply when the keyboard is visible. The default values are -50 for iOS and -250 for Android.
• duration: The duration of the animation in milliseconds. The default value is 250.

FAQs

Q: How does this library differ from React Native’s built-in KeyboardAvoidingView?
A: react-native-keyboard-experience aims to provide a more consistent and seamless experience across both iOS and Android with minimal configuration. React Native’s KeyboardAvoidingView can sometimes require platform-specific adjustments and may behave differently on each OS.

Q: Can I use this library with Expo?
A: Yes, this library is compatible with Expo projects as it is written in pure JavaScript and does not require any native code linking.

Q: Is it possible to disable the animation?
A: You can set the duration prop to 0 to make the view adjustment instantaneous, effectively disabling the animation.