Skip to main content
Version: Next

KeyboardProvider

KeyboardProvider should wrap your app. Under the hood it works with KeyboardControllerView to receive events during keyboard movements, maps these events to Animated/Reanimated values and store them in context.

Props​

statusBarTranslucent
​

A boolean prop to indicate whether StatusBar should be translucent on Android or not.

Important defaults

By default this library stretches to full screen (edge-to-edge mode) and status bar becomes translucent. But the library tries to use standard RN app behavior and automatically applies padding from top to look like a standard RN app. If you use translucent prop for StatusBar component - it will not work anymore. You'll need to specify it on provider level. For more info see this PR.

A boolean prop to indicate whether NavigationBar should be translucent on Android or not.

enabled​

A boolean prop indicating whether the module is enabled. It indicate only initial state, i. e. if you try to change this prop after component mount it will not have any effect. To change the property in runtime use useKeyboardController hook and setEnabled method. Defaults to true.

Could be useful to set it to false if you want to activate the module only on specific screens.

Example​

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

const App = () => {
return (
<KeyboardProvider>
{/* The other components in your tree */}
</KeyboardProvider>
);
};