OnEndReached calls on initial render and is called even if data is empty

[Ahmedhamed77]

Description

OnEndReached calls on initial render when the app runs each time on the first time and is called even if data is empty

React Native Version

0.71.1

Output of npx react-native info

System:
OS: macOS 13.3.1
CPU: (8) arm64 Apple M1
Memory: 207.19 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.16.0 - /opt/homebrew/opt/node@18/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.5.1 - /opt/homebrew/opt/node@18/bin/npm
Watchman: 2023.05.08.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.9971841
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.19 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.1 => 0.71.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

create a project with the following code

Snack, code example, screenshot, or link to a repository

const HomeScreen = () => {


return (
<SafeAreaView style={{flex:1}}>
      <FlatList
        data={[]}
        renderItem={() => {
          return (
            <View
              style={{
                height: 100,
                backgroundColor: 'red',
                borderRadius: 20,
                marginBottom: 20,
              }}>
              <CustomText>welcome</CustomText>
            </View>
          );
        }}
        ListEmptyComponent={() => {
          return (
            <View>
            <Text>Empty List</Text>
            </View>
          );
        }}
        onEndReached={() => {
          console.log('onEndReached');
        }}
      />
  </SafeAreaView>
)

}

repo
https://github.com/Ahmedhamed77/RN-flatList72.0

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.11. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[Ahmedhamed77]

I have updated the project to react-native": "0.72.0 which is the latest now and still the same problem

[cortinico]

I have updated the project to react-native": "0.72.0 which is the latest now and still the same problem

We're still waiting for a repro though

[Ahmedhamed77]

@cortinico thank you for replying, I have created a repo here just a FlatList with an empty array, and the onEndReached is already called on initial render
https://github.com/Ahmedhamed77/RN-flatList72.0

[MohamedAhmed122]

same issue for react-native "^0.71.0"

[Pranav-yadav]

@Ahmedhamed77 Thanks for the repro, someone will take a look into it. Please also update the PR Issue description with version, and snack link.

---

IIRC Nick was involved with PRs touching/involving onEndReached(...) recently.

I'm unable to mention him, seems he must've blocked me 🤔😕

Cc: @kelset this issue seems to be present on 0.71.x and 0.72, TBA.

---

same issue for react-native "^0.71.0"

@MohamedAhmed122 open a new issue as this issue now targets 0.72 and please provide repro using the latest patch. Thanks.

[Ahmedhamed77]

@Pranav-yadav any updates on this?

[Pranav-yadav]

@Pranav-yadav any updates on this?

Hey! Sorry, I was offline.
Actually, I don't know. But, as we can see Nico added the label ^ so someone from team may be looking into this and hopefully we'll have updates soon.

[emanusantos]

Any updates on this?

[Simoon-F]

RN 0.74.0, problems still exist.

[purplereborn]

const [onEnd, setOnEnd] = useState<boolean>(true);

onMomentumScrollBegin={() => setOnEnd(false)}
onEndReached={() => {
          if (!onEnd) {
            onEndReached();
          }
 }}