Skip to content

Commit e608f1b

Browse files
alvarombalvaromb
authored
removed listview (#327)
1 parent e8d528f commit e608f1b

File tree

3 files changed

+159
-153
lines changed

3 files changed

+159
-153
lines changed

‎README.md

Lines changed: 61 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,16 @@ A ScrollView component that handles keyboard appearance and automatically scroll
1313
</p>
1414

1515
## Supported versions
16+
1617
- `v0.4.0` requires `RN>=0.48`
1718
- `v0.2.0` requires `RN>=0.32.0`.
1819
- `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.
1920
- `v0.0.7` requires `react-native>=0.25.0`.
2021
- Use `v0.0.6` for older RN versions.
2122

2223
## Installation
23-
Installation can be done through ``npm`` or `yarn`:
24+
25+
Installation can be done through `npm` or `yarn`:
2426

2527
```shell
2628
npm i react-native-keyboard-aware-scroll-view --save
@@ -31,12 +33,13 @@ yarn add react-native-keyboard-aware-scroll-view
3133
```
3234

3335
## Usage
34-
You can use the `KeyboardAwareScrollView`, the `KeyboardAwareListView`, `KeyboardAwareSectionList` or the `KeyboardAwareFlatList`
35-
components. They accept `ScrollView`, `ListView`, `SectionList` and `FlatList` default props respectively and
36+
37+
You can use the `KeyboardAwareScrollView`, `KeyboardAwareSectionList` or the `KeyboardAwareFlatList`
38+
components. They accept `ScrollView`, `SectionList` and `FlatList` default props respectively and
3639
implement a custom high order componente called `KeyboardAwareHOC` to handle keyboard appearance.
3740
The high order component is also available if you want to use it in any other component.
3841

39-
Import ``react-native-keyboard-aware-scroll-view`` and wrap your content inside
42+
Import `react-native-keyboard-aware-scroll-view` and wrap your content inside
4043
it:
4144

4245
```js
@@ -52,9 +55,11 @@ import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view
5255
```
5356

5457
## Auto-scroll in `TextInput` fields
58+
5559
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.
5660

5761
### Programatically scroll to any `TextInput`
62+
5863
In order to scroll to any `TextInput` field, you can use the built-in method `scrollToFocusedInput`. Example:
5964

6065
```js
@@ -65,24 +70,31 @@ _scrollToInput (reactNode: any) {
6570
```
6671

6772
```jsx
68-
<KeyboardAwareScrollView innerRef={ref => {this.scroll = ref}}>
73+
<KeyboardAwareScrollView
74+
innerRef={ref => {
75+
this.scroll = ref
76+
}}>
6977
<View>
70-
<TextInput onFocus={(event: Event) => {
71-
// `bind` the function if you're using ES6 classes
72-
this._scrollToInput(ReactNative.findNodeHandle(event.target))
73-
}} />
78+
<TextInput
79+
onFocus={(event: Event) => {
80+
// `bind` the function if you're using ES6 classes
81+
this._scrollToInput(ReactNative.findNodeHandle(event.target))
82+
}}
83+
/>
7484
</View>
7585
</KeyboardAwareScrollView>
7686
```
7787

7888
### Programatically scroll to any position
89+
7990
There's another built-in function that lets you programatically scroll to any position of the scroll view:
8091

8192
```js
8293
this.scroll.props.scrollToPosition(0, 0)
8394
```
8495

8596
## Register to keyboard events
97+
8698
You can register to `ScrollViewResponder` events `onKeyboardWillShow` and `onKeyboardWillHide`:
8799

88100
```jsx
@@ -97,6 +109,7 @@ You can register to `ScrollViewResponder` events `onKeyboardWillShow` and `onKey
97109
```
98110

99111
## Android Support
112+
100113
First, Android natively has this feature, you can easily enable it by setting `windowSoftInputMode` in `AndroidManifest.xml`. Check [here](https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft).
101114

102115
But if you want to use feature like `extraHeight`, you need to enable Android Support with the following steps:
@@ -107,69 +120,72 @@ But if you want to use feature like `extraHeight`, you need to enable Android Su
107120

108121
Android Support is not perfect, here is the supported list:
109122

110-
| **Prop** | **Android Support** |
111-
|----------|-----------------|
112-
| `viewIsInsideTabBar` | Yes |
113-
| `resetScrollToCoords` | Yes |
114-
| `enableAutomaticScroll` | Yes |
115-
| `extraHeight` | Yes |
116-
| `extraScrollHeight` | Yes |
117-
| `enableResetScrollToCoords` | Yes |
118-
| `keyboardOpeningTime` | No |
119-
123+
| **Prop** | **Android Support** |
124+
| --------------------------- | ------------------- |
125+
| `viewIsInsideTabBar` | Yes |
126+
| `resetScrollToCoords` | Yes |
127+
| `enableAutomaticScroll` | Yes |
128+
| `extraHeight` | Yes |
129+
| `extraScrollHeight` | Yes |
130+
| `enableResetScrollToCoords` | Yes |
131+
| `keyboardOpeningTime` | No |
120132

121133
## API
134+
122135
### Props
123-
All the `ScrollView`/`ListView`/`FlatList` props will be passed.
124-
125-
| **Prop** | **Type** | **Description** |
126-
|----------|----------|-----------------|
127-
| `innerRef` | `Function` | Catch the reference of the component. |
128-
| `viewIsInsideTabBar` | `boolean` | Adds an extra offset that represents the `TabBarIOS` height. |
129-
| `resetScrollToCoords` | `Object: {x: number, y: number}` | Coordinates that will be used to reset the scroll when the keyboard hides. |
130-
| `enableAutomaticScroll` | `boolean` | When focus in `TextInput` will scroll the position, default is enabled. |
131-
| `extraHeight` | `number` | Adds an extra offset when focusing the `TextInput`s. |
132-
| `extraScrollHeight` | `number` | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. |
133-
| `enableResetScrollToCoords` | `boolean` | Lets the user enable or disable automatic resetScrollToCoords. |
134-
| `keyboardOpeningTime` | `number` | Sets the delay time before scrolling to new position, default is 250 |
135-
| `enableOnAndroid` | `boolean` | Enable Android Support |
136+
137+
All the `ScrollView`/`FlatList` props will be passed.
138+
139+
| **Prop** | **Type** | **Description** |
140+
| --------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------- |
141+
| `innerRef` | `Function` | Catch the reference of the component. |
142+
| `viewIsInsideTabBar` | `boolean` | Adds an extra offset that represents the `TabBarIOS` height. |
143+
| `resetScrollToCoords` | `Object: {x: number, y: number}` | Coordinates that will be used to reset the scroll when the keyboard hides. |
144+
| `enableAutomaticScroll` | `boolean` | When focus in `TextInput` will scroll the position, default is enabled. |
145+
| `extraHeight` | `number` | Adds an extra offset when focusing the `TextInput`s. |
146+
| `extraScrollHeight` | `number` | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. |
147+
| `enableResetScrollToCoords` | `boolean` | Lets the user enable or disable automatic resetScrollToCoords. |
148+
| `keyboardOpeningTime` | `number` | Sets the delay time before scrolling to new position, default is 250 |
149+
| `enableOnAndroid` | `boolean` | Enable Android Support |
136150

137151
### Methods
152+
138153
Use `innerRef` to get the component reference and use `this.scrollRef.props` to access these methods.
139154

140-
| **Method** | **Parameter** | **Description** |
141-
|------------|---------------|-----------------|
142-
| `getScrollResponder` | `void` | Get `ScrollResponder` |
143-
| `scrollToPosition` | `x: number, y: number, animated: bool = true` | Scroll to specific position with or without animation. |
144-
| `scrollToEnd` | `animated?: bool = true` | Scroll to end with or without animation. |
145-
| `scrollIntoView` | `element: React.Element<*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } }` | Scrolls an element inside a KeyboardAwareScrollView into view. |
155+
| **Method** | **Parameter** | **Description** |
156+
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
157+
| `getScrollResponder` | `void` | Get `ScrollResponder` |
158+
| `scrollToPosition` | `x: number, y: number, animated: bool = true` | Scroll to specific position with or without animation. |
159+
| `scrollToEnd` | `animated?: bool = true` | Scroll to end with or without animation. |
160+
| `scrollIntoView` | `element: React.Element<*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } }` | Scrolls an element inside a KeyboardAwareScrollView into view. |
146161

147162
### Using high order component
148-
Enabling any component to be keyboard-aware is very easy. Take a look at the code of `KeyboardAwareListView`:
163+
164+
Enabling any component to be keyboard-aware is very easy. Take a look at the code of `KeyboardAwareFlatList`:
149165

150166
```js
151167
/* @flow */
152168

153-
import { ListView } from 'react-native'
169+
import { FlatList } from 'react-native'
154170
import listenToKeyboardEvents from './KeyboardAwareHOC'
155171

156-
export default listenToKeyboardEvents(ListView)
172+
export default listenToKeyboardEvents(FlatList)
157173
```
158174

159175
The HOC can also be configured. Sometimes it's more convenient to provide a static config than configuring the behavior with props. This HOC config can be overriden with props.
160176

161177
```js
162178
/* @flow */
163179

164-
import { ListView } from 'react-native'
180+
import { FlatList } from 'react-native'
165181
import listenToKeyboardEvents from './KeyboardAwareHOC'
166182

167183
const config = {
168184
enableOnAndroid: true,
169-
enableAutomaticScroll: true,
170-
};
185+
enableAutomaticScroll: true
186+
}
171187

172-
export default listenToKeyboardEvents(config)(ListView)
188+
export default listenToKeyboardEvents(config)(FlatList)
173189
```
174190

175191
The available config options are:
@@ -189,7 +205,6 @@ The available config options are:
189205
}
190206
```
191207

192-
193208
## License
194209

195210
MIT.

0 commit comments

Comments
 (0)