Infinite scrolling is one of the most used UX in App. In React Native, This is implemented using the onEndReached props of FlatList.

Unfortunately, It doesn't work well as expected. I think it's one of the headaches that hasn't been solved for quite some time. We had to make it work by modifying onEndReachedThreshold several times, but eventually it doesn't work efficiently.

Now, This patch will make it work as you expect! It's too easy to use.

History

My PR is in progress, but React Native may not be easy to apply because there are so many things to consider. So, I decided to provide this patch for those who needed it.

Usage

Install

Once installed, react-native's FlatList is automatically patched.

yarn add react-native-infinite-flatlist-patch --dev

prepare should be added to prevent this patch from being restored whenever packages are changed.

{
  ...
  "scripts": {
    ...,
    "prepare": "yarn run infinite-flatlist-patch"
  }
}

If you were already using prepare, you can add the patch script later.

"prepare": "yarn run jetify; yarn run infinite-flatlist-patch"

Execute manually

You can execute the patch manually with the command below.

yarn run infinite-flatlist-patch

Uninstall

Just delete the command you added to prepare and remove my package.

Check out the improvements

You can test it yourself with this test app.

This app is to test the improvements of onEndReached of FlatList.

• The list has 20 items at the beginning.
• When onEndReached is called, 10 items are added.

After the initial rendering

# Official FlatList

OnEndReached is called and FlatList has 30 items.

# Patched FlatList

OnEndReached is not called and FlatList has 20 items.

After scrolling to the 11th item

# Official FlatList

OnEndReached is called twice in a short period and FlatList has 50 items.

# Patched FlatList

OnEndReached is called and FlatList has 30 items.