Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
vanGalilea opened this issue Jan 3, 2024 · 6 comments

Comments

@vanGalilea
Copy link
Contributor

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
@vanGalilea
Copy link
Contributor Author

@mdjastrzebski let me know how this can be fixed and I'd raise a PR, I wanna start somewhere 😅

@mdjastrzebski
Copy link
Member

@vanGalilea similar issue has been already solved. See issue #1540 for details and PR #1543 for fix (released in v12.4.2)

@mdjastrzebski
Copy link
Member

Note, we might need to update the doc you linked to.

@vanGalilea
Copy link
Contributor Author

vanGalilea commented Jan 4, 2024

Note, we might need to update the doc you linked to.

I'll raise a PR to update the docs 👍🏻

@vanGalilea
Copy link
Contributor Author

vanGalilea commented Jan 4, 2024

@mdjastrzebski I see that you removed the Flatlist examples in this commit I've raised this pr #1551 for the time being.

Though I still haven't find a way testing whether onEndReached is being called after simulating a scroll to bottom.

@mdjastrzebski
Copy link
Member

@vanGalilea you can try calling fireEvent(element, 'endReached'). It should raise onEndReached event on a FlatList. You might need to experiment with proper event payload though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants