react-native-bidirectional-flatlist

A FlatList replacement which uses the official React Native Implementation of FlatList and adds Item height calculation of list items and correction of the current scroll position on top of it. Tested with React Native 0.69 (for RN < 0.68 see Troubleshooting)

How is it done

Item height calculation

Whenever a new list item is added to the list, the height of this new item is calculated outside of the viewport and will be used later on in the getItemLayout function. You can skip this step by providing your own implementation / function of getItemLayout.

Adjust the current scroll position

When items will be prepended, the heights of the new items will be used to correct the current scroll position of the FlatList. The correction is made in the native part of the ScrollView component. For iOS, this is not necessary, because the property maintainVisibleContentPosition will be used.

React Native Versions

| react-native | react-native-bidirectional-flatlist | |-----------------|-------------------------------------| | 0.73.x | 0.6.0 | | 0.72.x | ? (untested) | | 0.71.x – 0.69.x | 0.5.0 |

Examples

Prepend items during scroll

Remove one item and prepend multiple

Installation

npm install react-native-bidirectional-flatlist

or

yarn add react-native-bidirectional-flatlist

Usage

import BidirectionalFlatlist from "react-native-bidirectional-flatlist";

// ...

<BidirectionalFlatlist data={data} renderItem={renderItem} keyExtractor={keyExtractor} />

Properties

| Name | description | required | default | |---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------|---------| | data | The data array, see RN doc | ☑️ | | | renderItem | Render function, see RN doc. Difference to FlatList: Argument is {item: T; prerendering: boolean} | ☑️ | | | keyExtractor | Function, which returns the key / id of the item, see RN doc. Difference to FlatList: The index-Parameter is missing | | (item) => item.id ?? item.key | | getItemLayout | If you know the dimensions of the items you can provide it, otherwise prerendering would be used to determine the height. See RN doc | | | |...||||

Separators are not allowed. For other properties see RN doc.

Typescript

Built with Typescript, so works with Typescript out of the box.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Troubleshooting

If you use React Native Version < 0.68.0 the constructor of ReactScrollView is different and therefore you get a crash on Android. You can change (e.g. with patch-package) the constructor like so:

import com.facebook.react.bridge.ReactContext;
...

  public ScrollView(ReactContext context) {
    super(context, null);
  }

License

MIT