/react-native-autoscroll-flatlist

An enhanced React Native <FlatList> component to provide auto-scrolling functionality.

Primary LanguageTypeScriptMIT LicenseMIT

react-native-autoscroll-flatlist

react-native-autoscroll-flatlist is released under the MIT license. build status for react-native-autoscroll-flatlist react-native-autoscroll-flatlist's current npm package version

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.

Demo

demo

Features

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.

scroll to end manually

  • You can tap on the scrollToEndIndicator (customizable) shown on the bottom right of the list.

scroll to end by tapping on scrollToEndIndicator

  • You can tap on the newMessageAlertComponent (customizable) shown on the top of the list.

scroll to end by tapping on newMessageAlert

Installation

npm install --save react-native-autoscroll-flatlist

or

yarn add react-native-autoscroll-flatlist

Example Usage

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.

Properties

This component extends the official FlatListProps with the following additional props:

Please read src/index.tsx for more explanations and details.

Methods

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.

TODOs

  1. Add support for inverted orientation.

  2. Add example for landscape usage.