Skip to content

onEndReached on a FlatList is not being triggered anymore after a fireEvent.scroll #1549

Closed
@vanGalilea

Description

@vanGalilea

Describe the bug

onEndReached on a FlatList is not being triggered anymore after a fireEvent.scroll

Expected behavior

onEndReached is called the way it used to work before

Steps to Reproduce

Follow this example from the docs.
My test was something along the lines of:

import {FlatList, View} from 'react-native';
import {fireEvent, render, screen} from '@testing-library/react-native';

test('scrolls to bottom and loads more items', () => {
  const onEndReached = jest.fn();

  const eventData = {
    nativeEvent: {
      contentOffset: {
        y: 500,
      },
      contentSize: {
        // Dimensions of the scrollable content
        height: 500,
        width: 100,
      },
      layoutMeasurement: {
        // Dimensions of the device
        height: 100,
        width: 100,
      },
    },
  };
  render(
    <FlatList
      data={Array.from({length: 10}, (_, key) => ({key: `${key}`}))}
      renderItem={() => <View style={{height: 100, width: 100}} />}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5}
      testID="flat-list"
      initialNumToRender={5}
    />,
  );
  fireEvent.scroll(screen.getByTestId('flat-list'), eventData);
  expect(onEndReached).toHaveBeenCalled();
});

Screenshots

N/A

Versions

@testing-library/react-native: ^12.4.3 => 12.4.3 
react: 18.2.0 => 18.2.0 
react-native: 0.73.1 => 0.73.1 
react-test-renderer: 18.2.0 => 18.2.0 

Side Note

  • This occurred after upgrading RN from 0.72.4 to 0.73.1 so I'm suspecting its incompatible with RN's new version.
  • onScroll is being called after a fireEvent.scroll in contrary to onEndReached

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions