Skip to content

Commit e973f46

Browse files
committed
Update Readme
1 parent 4386a33 commit e973f46

1 file changed

Lines changed: 33 additions & 2 deletions

File tree

README.md

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
# react-native-quick-scroll [![npm version](https://img.shields.io/npm/v/react-native-quick-scroll.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-quick-scroll)
1+
# react-native-quick-scroll [![npm version](https://img.shields.io/npm/v/react-native-quick-scroll.svg?style=flat)](https://www.npmjs.com/package/react-native-quick-scroll)
22

33
React Native FlatList component which allows you to scroll through large lists using the scrollbar thumb
44

5-
# Demo
65
# Installation
76

87
Install with npm
@@ -19,5 +18,37 @@ yarn add react-native-quick-scroll
1918
```
2019
import QuickScrollList from 'react-native-quick-scroll';
2120
```
21+
```
22+
<QuickScrollList
23+
keyExtractor={(asset, index) => String(asset.id)}
24+
data={media}
25+
renderItem={this.renderSongs}
26+
onRefresh={this.refreshList}
27+
initialScrollIndex={canScan ? currentTrack.index : undefined}
28+
showsVerticalScrollIndicator={false}
29+
itemHeight={60}
30+
viewportHeight={ScreenHeight - TabHeight}
31+
/>
32+
```
2233

2334
# Props
35+
36+
Inherits the following properties as well as all [FlatList props](#https://facebook.github.io/react-native/docs/flatlist#props), except `ref` and `showsVerticalScrollIndicator`
37+
38+
| Prop | Type | Default Value | Description | Required |
39+
|---|---|---|---|
40+
| `itemHeight` | `number` | | Height of an item in the FlatList | Yes |
41+
| `viewportHeight` | `number` | | Height of the FlatList area visible on screen at a given time | Yes |
42+
| `thumbHeight` | `number` | `80` | Height of the scroll bar thumb | No |
43+
| `touchAreaWidth` | `number` | `25` | Width of the touchable area around thumb | No |
44+
| `flashDuration` | `number` | `40` | The time taken by the animation to display scroll bar on screen after the scroll has begun (in ms) | No |
45+
| `flashOutDuration` | `number` | `1500` | The time after which scroll bar disappears (in ms) | No |
46+
| `rightOffset` | `number` | `15` | The distance of the scroll bar from the right edge of screen | No |
47+
| `thumbStyle` | `object` | | Style object for the scroll bar thumb | No |
48+
| `scrollbarStyle` | `object` | | Style object for the scroll bar | No |
49+
| `containerStyle` | `object` | | Style object for the parent container | No |
50+
| `hiddenPosition` | `number` | `ScreenWidth + 15` | The offscreen position where the scroll bar thumb moves to after `flashOutDuration` | No |
51+
52+
# Todo (PRs welcome!)
53+
- [ ] Add native driver support
54+
- [ ] Rewrite with TypeScript

0 commit comments

Comments
 (0)