react-native-autoscroll-flatlist


An enhanced version of the original react-native 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 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

- Inverted FlatList is also supported by passing the boolean inverted to the props.

!inverted support

- Horizontal (landscape) orientation is supported by passing the boolean horizontal to the props.

!horizontal support

!horizontal-inverted support

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 , for example:

`
ref={this.myRef}
threshold={20}
data={myData}
renderItem={({item, index}) => }
keyExtractor={item => item.id}
/>
`

You can check out the example folder for further details.

You can check out App.tsx, or replace it with the content of App-Horizontal.tsx to try out usage in landscape orientation.

Note that the landscape demo does not work in react-native-web because of the constraint with ScreenOrientation not being able to lock it to horizontal.

Properties

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

You can read the type definitions file for more details and explanations.

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. |

FAQ for usage on react-native-web

There are certain caveats for usage on react-native-web:

Q: My page keeps expanding in height and the autoscroll function is not being triggered. How do I fix this?

A: For usage in react-native, usually add a flex property such as flex: 1 to the container would be sufficient to get FlatList working.
However, when it comes to react-native-web, you will have to explicitly set the height of the container such that it will not keep expanding.
To do so, a simple fix would be to add
`javascript
height: Dimensions.get("window").height
maxHeight: Dimensions.get("window").height
``
to the container style (depending on your use cases).