Out-of-the-box alternative to KeyboardAvoidingView, that provides identical behavior on both iOS and Android, with more extra features
npm install react-native-keyboard-moving-view

!GitHub

Out-of-the-box alternative to KeyboardAvoidingView, that provides identical behavior on both iOS and Android, with more extra features.
| Padding | Position |
| :------------------------------------------------------: | :-------------------------------------------------------: |
|
|
|
| Padding | Position |
| :----------------------------------------------------------: | :-----------------------------------------------------------: |
|
|
|
``sh`
yarn add react-native-keyboard-moving-viewOR
npm install react-native-keyboard-moving-view
#### IOS
`sh`
cd ios && pod install
`js
import React from 'react';
import { SafeAreaView, TextInput, StyleSheet } from 'react-native';
import { KeyboardMovingView } from 'react-native-keyboard-moving-view';
export default function App() {
return (
behavior="position"
extraHeight={25}
>
);
}
const styles = StyleSheet.create({
safeAreaView: { flex: 1 },
keyboardMovingView: { flex: 1 },
textInput: {
fontSize: 17,
height: 60,
width: '100%',
backgroundColor: '#EFEEEE',
borderRadius: 5,
paddingHorizontal: 15,
marginTop: 'auto',
},
});
`
Note: if you are using SafeAreaView component make sure to wrap it around the KeyboardMovingView component to work as expected in IOS like in the example above.
---
| Name | Type | Default | Description |
| -------------------- | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ |
| behavior | padding OR position | null | Determines the behavior of the component when the keyboard is shown |extraHeight
| | number | 0 | Extra height between the keyboard and focused input(in position behavior) OR the content (in padding behavior) |onKeyboardWillShow
| | () => void | null | Called when the keyboard is about to be shown |onKeyboardWillHide
| | () => void | null | Called when the keyboard is about to be hidden |onKeyboardDidShow
| | () => void | null | Called when the keyboard is shown |onKeyboardDidHide
| | () => void | null` | Called when the keyboard is hidden |