A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput
.
v0.1.2
requires RN>=0.27.2
v0.0.7
requires react-native>=0.25.0
use 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.
Prop | Type | Description |
---|---|---|
viewIsInsideTabBar |
boolean |
Adds an extra offset that represents the TabBarIOS height. |
resetScrollToCoords |
Object: {x: number, y: number} |
Coordinates that will be used to reset the scroll when the keyboard hides. |
enableAutoAutomaticScroll |
boolean |
When focus in TextInput will scroll the position, default is enabled. |
MIT.