Skip to content

Never ending loading when onEndReached and onStartReached are called simultaneously #4

@mattproch

Description

@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),
  );
};

Metadata

Metadata

Labels

resolvedIssue/question has been fixed/answered, but waiting for reporter to confirm

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions