react-native-bidirectional-flatlist v0.6.0
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-flatlistor
yarn add react-native-bidirectional-flatlistUsage
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);
}