A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.

Use react-native>=0.25.0 for v0.0.7 & up and v0.0.6 for older RN versions.

Installation can be done through npm:

npm i react-native-keyboard-aware-scroll-view --save

You can use the KeyboardAwareScrollView or the KeyboardAwareListView components. Both accept ScrollView and ListView default props and implements a custom KeyboardAwareMixin to handle keyboard appearance. The mixin is also available if you want to use it in any other component.

Import react-native-keyboard-aware-scroll-view and wrap your content inside it:

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

<KeyboardAwareScrollView> <View> <TextInput /> </View> </KeyboardAwareScrollView>

As of v0.1.0, the component auto scrolls to the focused TextInput 😎. For versions v0.0.7 and older you can do the following.

In order to scroll to any TextInput field, you can use the built-in method scrollToFocusedInput. Example:

_scrollToInput (reactNode: any) { // Add a 'scroll' ref to your ScrollView this.refs.scroll.scrollToFocusedInput(reactNode) }

<KeyboardAwareScrollView ref='scroll'> <View> <TextInput onFocus={(event: Event) => { // `bind` the function if you're using ES6 classes this._scrollToInput(ReactNative.findNodeHandle(event.target)) }/> </View> </KeyboardAwareScrollView>

There's another built-in function that lets you programatically scroll to any position of the scroll view:

this.refs.scroll.scrollToPosition(0, 0, true)

You can register to ScrollViewResponder events onKeyboardWillShow and onKeyboardWillHide:

<KeyboardAwareScrollView onKeyboardWillShow={(frames: Object) => { console.log('Keyboard event', frames) }}> <View> <TextInput /> </View> </KeyboardAwareScrollView>

All the ScrollView/ListView props will be passed.

MIT.