Skip to content
React Native scroll bar component for fast scrolling
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
lib
.gitignore
.npmignore
LICENSE.txt
README.md
index.js
package.json

README.md

react-native-quick-scroll npm version

Customizable and performant React Native scroll bar component for quickly scrolling through large lists (based on FlatList)

Demo

Demo gif

Installation

Install with npm

npm install --save react-native-quick-scroll

Or install with Yarn

yarn add react-native-quick-scroll

Usage

import QuickScrollList from 'react-native-quick-scroll';
<QuickScrollList
	keyExtractor={(item, index) => String(item.id)}
	data={dataArray}
	renderItem={this.renderItem}
	itemHeight={60}
	viewportHeight={ScreenHeight - TabHeight}
/>

Props

Inherits all valid FlatList props, except ref and showsVerticalScrollIndicator. Also accepts the following props:

Prop Type Default Value Description Required
itemHeight number Height of an item in the FlatList Yes
viewportHeight number Height of the FlatList area visible on screen at a given time Yes
thumbHeight number 80 Height of the scroll bar thumb No
touchAreaWidth number 25 Width of the touchable area around thumb No
flashDuration number 40 The time taken by the animation to move scroll bar on-screen after the scroll has begun (in ms) No
flashOutDuration number 1500 The time after which scroll bar disappears (in ms) No
rightOffset number 15 The distance of the scroll bar from the right edge of screen No
thumbStyle object Style object for the scroll bar thumb (Don't pass height here, use the thumbHeight prop instead) No
scrollbarStyle object Style object for the scroll bar No
containerStyle object Style object for the parent container No
hiddenPosition number ScreenWidth + 15 The off-screen position where the scroll bar thumb moves to after flashOutDuration No

Todo (PRs welcome!)

  • Add native driver support
  • Implement with react-native-interactable for better performance
  • Rewrite with TypeScript
  • Add support for FlatList ref
You can’t perform that action at this time.