Never ending loading when onEndReached and onStartReached are called simultaneously

[mattproch]

If both onEndReached and onStartReached are called at the same time (eg. the list of data is really short) the end loading indicator never stops loading.

Video

flatlist.mov

Basic setup to reproduce:

<FlatList
  data={[1, 2, 3]}
  renderItem={() => (
    <View style={{ marginBottom: 20, backgroundColor: '#102C1A', height: 100, width: '100%' }} />
  )}
  keyExtractor={(item) => item.toString()}
  onStartReached={loadPrevious}
  onStartReachedThreshold={0.2}
  onEndReached={loadAfter}
  onEndReachedThreshold={0.2}
/>

const loadPrevious = async () => {
  console.log('PREVIOUS START');

  return new Promise<any>((resolve) =>
    setTimeout(() => {
      console.log('PREVIOUS RESOLVE');
      resolve(null);
    }, 1000),
  );
};

const loadAfter = async () => {
  console.log('AFTER START');

  return new Promise<any>((resolve) =>
    setTimeout(() => {
      console.log('AFTER RESOLVE');
      resolve(null);
    }, 2000),
  );
};

[vishalnarkhede]

@mattproch thanks for brining this up. I will take a look soon :)

[vaclavikjan]

@vishalnarkhede, any update about this issue? Thanks!

[vishalnarkhede]

@vaclavikjan I will take a look tomorrow :)

[vishalnarkhede]

@vaclavikjan @mattproch Could you please try new patch that I just published? 0.3.2

[vishalnarkhede]

Closing this for now. Please reopen if you still see the issue :)

[vaclavikjan]

@vishalnarkhede, the issue is fixed. Thanks a lot!

[devvrat-sharma]

I am facing this issue . Is it not resolved yet?