Skip to main content
Version: 1.13.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.

Usage with useAnimatedKeyboard hook from react-native-reanimated

react-native-keyboard-controller and useAnimatedKeyboard hook (from react-native-reanimated) may technically be used together, but it's highly recommended to use only one of them to avoid any kind of conflicts.

If you want to know the difference between useAnimatedKeyboard and the implementation of this library, please read this comparison.

Linking​

This package supports autolinking.

Pods update

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

Expo​

This library has native code, so it does not work with Expo Go but you can easily install it using a custom dev client.

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. 😎

Troubleshooting​

Incompatible kotlinVersion and failed Android builds​

Sometimes you may see failed Android builds complaining that your version of kotlin is lower than expected version.

error: module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.6.0, expected version is 1.4.1.

To overcome this issue you will need to set higher version of the kotlin:

react-native or expo bare workflow​

You need to modify android/build.gradle and specify correct kotlinVersion:

buildscript {
    ext {
        kotlinVersion = "1.6.21"
    }
}

For more information please, see how it's configured in example project.

Expo managed workflow​

If you are using Expo managed workflow you need to install expo-build-properties

npx expo install expo-build-properties

And add plugin inside of your app.json or app.config.js with following configuration:

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "kotlinVersion": "1.6.21"
          }
        }
      ]
    ]
  }
}

Swift support​

Since part of this library is written using swift language - your project needs to support it. For that you can create empty .swift file with bridging header. See this step-by-step guide if you have problems.