1- # react-native-keyboard-aware -scroll-view
1+ # react-native-keyboard-adjusted -scroll-view
22
33<img src =" https://travis-ci.org/APSL/react-native-keyboard-aware-scroll-view.svg?branch=master " />
44
@@ -8,97 +8,8 @@ A ScrollView component that handles keyboard appearance and automatically scroll
88<img src =" https://raw.githubusercontent.com/wiki/APSL/react-native-keyboard-aware-scroll-view/kasv.gif " alt =" Scroll demo " width =" 400 " >
99</p >
1010
11- ## Supported versions
12- - ` v0.2.0 ` requires ` RN>=0.32.0 ` .
13- - ` v0.1.2 ` requires ` RN>=0.27.2 ` but you should use ` 0.2.0 ` in order to make it work with multiple scroll views.
14- - ` v0.0.7 ` requires ` react-native>=0.25.0 ` .
15- - Use ` v0.0.6 ` for older RN versions.
16-
1711## Installation
18- Installation can be done through `` npm `` :
1912
2013``` shell
21- npm i react-native-keyboard-aware-scroll-view --save
22- ```
23-
24- ## Usage
25- You can use the `` KeyboardAwareScrollView `` or the `` KeyboardAwareListView ``
26- components. Both accept `` ScrollView `` and `` ListView `` default props and
27- implements a custom `` KeyboardAwareMixin `` to handle keyboard appearance.
28- The mixin is also available if you want to use it in any other component.
29-
30- Import `` react-native-keyboard-aware-scroll-view `` and wrap your content inside
31- it:
32-
33- ``` js
34- import { KeyboardAwareScrollView } from ' react-native-keyboard-aware-scroll-view'
35- ```
36-
37- ``` jsx
38- < KeyboardAwareScrollView>
39- < View>
40- < TextInput / >
41- < / View>
42- < / KeyboardAwareScrollView>
43- ```
44-
45- ## Auto-scroll in ` TextInput ` fields
46- 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.
47-
48- ### Programatically scroll to any ` TextInput `
49- In order to scroll to any ` TextInput ` field, you can use the built-in method ` scrollToFocusedInput ` . Example:
50-
51- ``` js
52- _scrollToInput (reactNode : any ) {
53- // Add a 'scroll' ref to your ScrollView
54- this .refs .scroll .scrollToFocusedInput (reactNode)
55- }
14+ yarn add react-native-keyboard-adjusted-scroll-view
5615```
57-
58- ``` jsx
59- < KeyboardAwareScrollView ref= ' scroll' >
60- < View>
61- < TextInput onFocus= {(event : Event ) => {
62- // `bind` the function if you're using ES6 classes
63- this ._scrollToInput (ReactNative .findNodeHandle (event .target ))
64- }/ >
65- < / View>
66- < / KeyboardAwareScrollView>
67- ` ` `
68-
69- ### Programatically scroll to any position
70- There's another built-in function that lets you programatically scroll to any position of the scroll view:
71-
72- ` ` ` js
73- this .refs .scroll .scrollToPosition (0 , 0 , true )
74- ` ` `
75-
76- ## Register to keyboard events
77- You can register to ` ScrollViewResponder` events ` onKeyboardWillShow` and ` onKeyboardWillHide` :
78-
79- ` ` ` js
80- < KeyboardAwareScrollView
81- onKeyboardWillShow= {(frames : Object ) => {
82- console .log (' Keyboard event' , frames )
83- }}>
84- < View>
85- < TextInput / >
86- < / View>
87- < / KeyboardAwareScrollView>
88- ` ` `
89-
90- ## API
91- ### Props
92- All the ` ScrollView` /` ListView` props will be passed.
93-
94- | **Prop** | **Type** | **Description** |
95- |----------|----------|-----------------|
96- | ` viewIsInsideTabBar` | ` boolean` | Adds an extra offset that represents the ` TabBarIOS` height. |
97- | ` resetScrollToCoords` | ` Object : {x: number, y: number}` | Coordinates that will be used to reset the scroll when the keyboard hides. |
98- | ` enableAutoAutomaticScroll` | ` boolean` | When focus in ` TextInput` will scroll the position, default is enabled. |
99- | ` extraHeight` | ` number` | Adds an extra offset when focusing the ` TextInput` s. |
100- | ` extraScrollHeight` | ` number` | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. |
101-
102- ## License
103-
104- MIT.
0 commit comments