React-native-keyboard-detect NPM

react-native-keyboard-detect

A React Native component for detecting the keyboard visibility and adjusting the view accordingly. It helps you manage the UI when the keyboard is visible, providing smooth animations for an improved user experience.

Features

Detects the keyboard visibility changes.
Provides smooth animated transition when the keyboard shows or hides.
Customizable option animation duration.
Works on both iOS and Android platforms.

Installation

npm

npm install react-native-keyboard-detect --save

Platform compatibility

This project is compatible with iOS, Android, Windows and macOS.
This project supports both the old (paper) and the new architecture (fabric).
This project is compatible with expo.

Getting Started

If any step seems unclear, please create a pull request.

Usage

To get started, import and use the KeyboardDetect component in your React Native app. Here’s a step-by-step guide.

import { KeyboardDetect } from 'react-native-keyboard-detect';

Now, wrap the content you want to adjust with KeyboardDetect:

import React from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { KeyboardDetect } from 'react-native-keyboard-detect';

const MyComponent = () => {
  return (
    <KeyboardDetect animationDuration={300}>
      <View style={styles.inner}>
        <Text style={styles.header}>Login</Text>
        <TextInput style={styles.input} placeholder="Username" />
        <TextInput style={styles.input} placeholder="Password" />
        <Button title="Submit" onPress={() => {}} />
      </View>
    </KeyboardDetect>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: 'space-around',
  },
  header: {
    fontSize: 36,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  input: {
    height: 40,
    borderColor: '#ccc',
    borderBottomWidth: 1,
    marginBottom: 12,
    paddingLeft: 8,
  },
});

export default MyComponent;

Props

Prop	Type	Default Value	Description
`animationDuration`	`number`	200	Customizable duration (in milliseconds) for the animation when the keyboard shows/hidden.

Notes

children is automatically handled and does not need to be explicitly passed as a prop. The content to be adjusted should be wrapped by the KeyboardDetect component directly.

Example

Here’s an example of how you can use KeyboardDetect with some custom props:

<KeyboardDetect animationDuration={300}>
  <View style={styles.inner}>
    <Text style={styles.header}>Sign In</Text>
    <TextInput style={styles.input} placeholder="Email" />
    <TextInput style={styles.input} placeholder="Password" secureTextEntry />
    <Button title="Login" onPress={() => {}} />
  </View>
</KeyboardDetect>