[ Built with ♥ at Stream ]
FlatList by react-native only allows infinite scroll in one direction (using onEndReached
). This package adds capability on top of FlatList to allow infinite scroll from both directions, and also maintains smooth scroll UX.
Features
onStartReached
& onEndReached
, which you can use to load more results.yarn add react-native-bidirectional-infinite-scroll @stream-io/flat-list-mvcp
Please check the example app for working demo.
import { FlatList } from "react-native-bidirectional-infinite-scroll";
<FlatList
data={numbers}
renderItem={ListItem}
keyExtractor={(item) => item.toString()}
onStartReached={onStartReached} // required, should return a promise
onEndReached={onEndReached} // required, should return a promise
showDefaultLoadingIndicators={true} // optional
onStartReachedThreshold={10} // optional
onEndReachedThreshold={10} // optional
activityIndicatorColor={'black'} // optional
HeaderLoadingIndicator={() => { /** Your loading indicator */ }} // optional
FooterLoadingIndicator={() => { /** Your loading indicator */ }} // optional
// You can use any other prop on react-native's FlatList
/>
Note:
onEndReached
and onStartReached
only get called once, per content length.onEndReached
and onStartReached
must return a promise.maintainVisibleContentPosition
is fixed, and can’t be modified through props.ListFooterComponent
via prop, since it is occupied by FooterLoadingIndicator
See the contributing guide to learn how to contribute to the repository and the development workflow.
Author: GetStream
Source Code: https://github.com/GetStream/react-native-bidirectional-infinite-scroll
#react-native #react #mobile-apps