react-native-keyboard-aware-scroll-view
A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput
.
Supported versions
v0.2.0
requiresRN>=0.32.0
.v0.1.2
requiresRN>=0.27.2
but you should use0.2.0
in order to make it work with multiple scroll views.v0.0.7
requiresreact-native>=0.25.0
.- Use
v0.0.6
for older RN versions.
Installation
Installation can be done through npm
:
npm i react-native-keyboard-aware-scroll-view --save
Usage
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:
<KeyboardAwareScrollView> <View> <TextInput /> </View></KeyboardAwareScrollView>
TextInput
fields
Auto-scroll in 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.
TextInput
Programatically scroll to any In order to scroll to any TextInput
field, you can use the built-in method scrollToFocusedInput
. Example:
{ // Add a 'scroll' ref to your ScrollView thisrefsscroll}
<KeyboardAwareScrollView ='scroll'> <View> <TextInput =
Programatically scroll to any position
There's another built-in function that lets you programatically scroll to any position of the scroll view:
thisrefsscroll
Register to keyboard events
You can register to ScrollViewResponder
events onKeyboardWillShow
and onKeyboardWillHide
:
<KeyboardAwareScrollView onKeyboardWillShow= { console }> <View> <TextInput /> </View></KeyboardAwareScrollView>
Android Support
First, Android natively has this feature, you can easily enable it by setting windowSoftInputMode
in AndroidManifest.xml
. Check here.
But if you want to use feature like extraHeight
, you need to enable Android Support with the following steps:
- Make sure you are using react-native
0.46
or above. - Set
windowSoftInputMode
toadjustPan
inAndroidManifest.xml
. - Set
enableOnAndroid
property totrue
.
Android Suppor is not perfect, here is the support list:
Prop | Android Support |
---|---|
viewIsInsideTabBar |
Yes |
resetScrollToCoords |
Yes |
enableAutoAutomaticScroll |
Yes |
extraHeight |
Yes |
extraScrollHeight |
Yes |
enableResetScrollToCoords |
Yes |
keyboardOpeningTime |
No |
API
Props
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. |
extraHeight |
number |
Adds an extra offset when focusing the TextInput s. |
extraScrollHeight |
number |
Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. |
enableResetScrollToCoords |
boolean |
Lets the user enable or disable automatic resetScrollToCoords. |
keyboardOpeningTime |
number |
Sets the delay time before scrolling to new position, default is 250 |
enableOnAndroid |
boolean |
Enable Android Support |
Method | Parameter | Description |
---|---|---|
getScrollResponder |
void |
Get ScrollResponder |
scrollToPosition |
x: number, y: number, animated: bool = true |
Scroll to specific position with or without animation. |
scrollToEnd |
animated?: bool = true |
Scroll to end with or without animation. |
License
MIT.