Skip to main content
Version: 1.19.0

Installation

Adding a library to the project​

Install the react-native-keyboard-controller package in your React Native project.

yarn add react-native-keyboard-controller
Mandatory react-native-reanimated dependency

This library requires react-native-reanimated to work properly. If you don't have it in your project, you need to follow installation guide and install it in your project before using this library.

Linking​

This package supports autolinking.

Pods update

After adding the package don't forget to re-install pods and re-assemble android and ios applications, since this library contains native code.

If you still experience issues like package doesn't seem to be linked try performing a fresh build to clear any outdated cache.

Adding provider​

In order to use it you'll need to wrap your app with KeyboardProvider component.

Why it's needed?

If you are bothered why it's needed, you can read more about it in architecture deep dive to understand all aspects of how this library works.

import { KeyboardProvider } from "react-native-keyboard-controller";

export default function App() {
  return (
    <KeyboardProvider>
      {/* your main application code goes here */}
    </KeyboardProvider>
  );
}

Congratulations! 🎉 You've just finished installation process. Go to the next section to get more insights of what you can do using this library. 😎

Flickering keyboard on app start

KeyboardProvider preloads the keyboard when the app starts to avoid an initial delay later. However, in some situations, this may cause the keyboard to briefly appear on launch.

To prevent this, disable preloading by setting the preload={false} prop on KeyboardProvider. And don't forget to manually preload the keyboard later via KeyboardController when appropriate.

Troubleshooting guide

If you encounter some issues make sure to read the Troubleshooting section.