react-native-keyboard-detect

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>

Contributing

Feel free to contribute by adding more languages or improving the time-based logic. Follow these steps:

• Fork the repository.
• Create your feature branch (git checkout -b feature/my-feature).
• Commit your changes (git commit -am 'Add some feature').
• Push to the branch (git push origin feature/my-feature).
• Create a new Pull Request.

License

MIT

Translations

This readme is available in:

• English

📝 Author

👤 Johny Lie

• Github: @johnylie

🌱 Show your support

Please ⭐️ this repository if this project helped you!