React Native keyboard Moving View

Out-of-the-box alternative to KeyboardAvoidingView, that provides identical behavior on both iOS and Android, with more extra features.

Demonstration

IOS

Padding	Position

Android

Padding	Position

Installation

yarn add react-native-keyboard-moving-view
# OR
npm install react-native-keyboard-moving-view

IOS

cd ios && pod install

Usage

import React from 'react';
import { SafeAreaView, TextInput, StyleSheet } from 'react-native';
import { KeyboardMovingView } from 'react-native-keyboard-moving-view';

export default function App() {
  return (
    <SafeAreaView style={styles.safeAreaView}>
      <KeyboardMovingView
        style={styles.keyboardMovingView}
        behavior="position"
        extraHeight={25}
      >
        <TextInput style={styles.textInput} placeholder="Start typing" />
      </KeyboardMovingView>
    </SafeAreaView>
  );
}

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.

---

Props

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