A react-native module to help you with the keyboard behavior. It is mostly a little upgrade of KeyboardAvoidingView (default mode) with an alternative in some cases of bug (debug mode).
HOW TO INSTALL
npm i react-native-keyboard-behavior
yarn add react-native-keyboard-behavior
Condition: on Android, you need android:windowSoftInputMode set to "adjustResize" in AndroidManifest.
THE MODES
- "Default": the keyboard will appear on top of the content when showing up and some space is added automatically.
The screen will scroll to the focused input if covered up.
- "Debug": the keyboard will appear on top of the content when showing up and some space of the height of the keyboard is added manually.
The screen won't scroll to the focused input if covered up.
GUIDELINES
1- Use this component as a container, as the highest View component of your component.
NB : You can use it around App only if you won't use the prop disableScrollView (see point 2) or encounter any flickering with the keyboard (see point 4).
2- By default, a ScrollView is added around the children of KeyboardBehavior. So if children is already nested with a ScrollView, you might need to disable the ScrollView of the KeyboardBehavior with the prop disableScrollView.
3- If you are in default mode, you'll need to specify the prop keyboardVerticalOffset. This is the distance between the top of the user screen and the react native view. For example, with react-navigation you should add the header height. If you are not in a safe area, you will also need to add the top inset.
4- On Android, there can be some issues (mostly flickering) when the keyboard appears or disappears, especially if you use react-navigation. If you encounter thoses kind of bugs and if your(s) input(s) are never covered up by the keyboard (e.g are on top of the screen), then you can use the value "debug" to the prop behavior. You won't have any visual bug.
To better understand how the default mode works, you can read about KeyboardAvoidingView.
Standard usage:
<KeyboardBehavior keyboardVerticalOffset={headerHeight+insets.top} backgroundColor="black">
<View>
<TextInput
placeholder="test"
/>
</View>
</KeyboardBehavior>
| Props (all optionals) | Type | Default |
|---|---|---|
| behavior | 'default' or 'debug' | 'default' |
| disableScrollView (default mode only) | boolean | false |
| backgroundColor | string | 'transparent' |
| keyboardVerticalOffset | number | 0 |
| width | string or number | "100%" |