Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

react-native-two-way-list

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-two-way-list

React Native FlatList and SectionList wrappers that support adding data to the top


Version published
Maintainers
1
Created

react-native-two-way-list

What is it?

This is a project based off the need to support infinite scrolling in two directions.

FlatList and SectionList already support infinite scrolling well in one direction (down by default). They do this with an onEndReached function that is passed by the caller. Whenever the user nears the end of the list, the function is called, which usually loads more data, and appends it to the end of the list data. The scroll position is maintained when the list updates, and the scroll seams pretty seamless.

These components effectively do the same for the start of the list. When a user approaches the start, the onStartReached callback is fired, and can load more data. Whenever new data is added, the lists see how much was added and set the scroll position of the list as closely as possible to where the user was before data was added.

Usage

Props

Can be used with all of ReactNative's SectionList/FlatList props in addition to the following

Prop NameTypeDefault
onStartReached(void) => any
onStartReachedThresholdnumber0
onStartReached

Function to fire when the user scrolls into the region defined by onStartReachedThreshold (or the very beginning if not defined). Only fires when user is scrolling toward the start.

Note: This function is called once per scroll, meaning once in the drag or once in the resulting momentum that brings the scrollview within the start threshold.

onStartReachedThreshold

How far from the start (in units of visible length of the list) the start edge of the list must be from the start of the content to trigger the onStartReached callback. A value of 0.5 will trigger onStartReached when the start of the content is within half the visible length of the list. A Value of 0 will only fire the callback when the user is at the very start of the list (or above it from bouncing).

Note: if this is 0/undefined AND bounces={false} AND initialScrollIndex is not > 0, the user will have to scroll down and back up to trigger the callback. It is not fired if the list is at the start already, and there's no way to scroll up (from bounce)

sample

Installing Locally

npm i

Examples

Working examples of these components in a react-native project can be found in the /examples directory. To run them, cd to the example you want to run and...

npm i
react-native run-ios

FAQs

Package last updated on 01 Dec 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts