An enhanced version of the original react-native <FlatList> component with built-in support for both Javascript and Typescript usage.
This component enables auto-scrolling on new item added to the list - which works like any chat client.
Now supports horizontal <FlatList> as well in version >= 1.6.0.
Auto-scroll is disabled when scrolled away from end of list. There are 3 ways to re-enable auto-scrolling:
- You can manually scroll back to the end of list.
- You can tap on the
scrollToEndIndicator(customizable) shown on the bottom right of the list.
- You can tap on the
newMessageAlertComponent(customizable) shown on the top of the list.
npm install --save react-native-autoscroll-flatlist
or
yarn add react-native-autoscroll-flatlist
Import the component with:
import AutoScrollFlatList from "react-native-autoscroll-flatlist";
and simply use it like an ordinary <FlatList>, for example:
<AutoScrollFlatList
ref={this.myRef}
threshold={20}
data={myData}
renderItem={({item, index}) => <YourComponent item={item} index={index} />}
keyExtractor={item => item.id}
/>
You can check out the example folder for further details.
This component extends the official FlatListProps with the following additional props:
Please read src/index.tsx for more explanations and details.
This component extends the official FlatList Methods with the following modified / additional methods:
| Method | Parameters | Description |
|---|---|---|
| scrollToEnd | params: {animated: boolean} = {animated: true} | Set newItemCount to 0 and then trigger scrollToOffset to end of page. |
| isAutoScrolling | Returns whether auto-scrolling (boolean) is in effect. |
-
Add support for inverted orientation.
-
Add example for landscape usage.