Package Exports

react-native-keyboard-controller
react-native-keyboard-controller/lib/commonjs/index.js
react-native-keyboard-controller/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-keyboard-controller) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-keyboard-controller

Keyboard manager which works in identical way on both iOS and Android.

Note: This library is still in development and in beta stage. So most likely it has bugs/issues - don't hesitate to report if you find them 🙂.

Demonstration

Key features

mapping keyboard appearance to animated values 😎
missing keyboardWillShow / keyboardWillHide events are available on Android 😍
module for changing soft input mode on Android 🤔
reanimated support 🚀
interactive keyboard dismissing (planned) 👆📱
and more is coming... Stay tuned! 😊

Installation

Install react-native-keyboard-controller package from npm:

yarn add react-native-keyboard-controller
# or
# npm install react-native-keyboard-controller --save

Usage

For more comprehensive usage you can have a look on example.

Below you can see a short overview of library API:

import {
  KeyboardProvider,
  useKeyboardAnimation,
} from 'react-native-keyboard-controller';

// 1. wrap your app in Provider
<KeyboardProvider>
  <AppContainer />
</KeyboardProvider>

// 2. get animation values where you need them
const { height, progress } = useKeyboardAnimation();

// 3. Animate any elements as you wish :)
<Animated.View
  style={{
    width: 50,
    height: 50,
    backgroundColor: 'red',
    borderRadius: 25,
    // the element will move up with the keyboard
    transform: [{ translateY: height }],
  }}
/>
<Animated.View
  style={{
    width: 50,
    height: 50,
    backgroundColor: 'green',
    borderRadius: 25,
    transform: [
      {
        // or use custom interpolation using `progress`
        translateX: progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 100],
        }),
      },
    ],
  }}
/>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT