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

Fix onStartReached not called when list content is small #42902

Closed
wants to merge 1 commit into from

Conversation

janicduplessis
Copy link
Contributor

Summary:

Currently if the virtualized list content is small onStartReached won't be called initially when the list is mounted. This is because when the content is small onEndReached will be called initially preventing onStartReached from being called. In _maybeCallOnEdgeReached calling onEndReached and onStartReached are in the same conditional so they cannot both be triggered at once. To improve the consistency of onStartReached we should call both onEndReached and onStartReached if needed.

Changelog:

[GENERAL] [FIXED] - Call onStartReached initially when list is small and onEndReached is called

Test Plan:

I used this code to test in RN Tester (replace content of RNTesterAppShared.js)

import React, { useState, useEffect } from "react";
import { StyleSheet, FlatList, View, Text, TouchableOpacity } from "react-native";

function App() {
  const [data, setData] = useState(generatePosts(4));
  const [idCount, setIdCount] = useState(1);

  const renderItem = ({ item }) => <Item data={item} />;
  const keyExtractor = (item) => item.id.toString();

  console.log("-------")
  return (
    <View style={{ flex: 1, marginVertical: 20 }}>
      <FlatList
        key={idCount}
        data={data}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        onEndReachedThreshold={0.05}
        onEndReached={() => console.log("onEndReached")}
        onStartReachedThreshold={0.05}
        onStartReached={() => console.log("onStartReached")}
        inverted
      />
      <TouchableOpacity  style={{height: 50, width: '100%', backgroundColor: 'purple'}} onPress={()=>{
          setIdCount(state => state + 1)
          setData(generatePosts(2))
      }}><Text> Press</Text></TouchableOpacity>
    </View>
  );
}

function Item({ data }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>
        {data.id} - {data.title}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  item: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 24,
  },
});

const generatePosts = (count, start = 0) => {
  return Array.from({ length: count }, (_, i) => ({
    title: `Title ${start + i + 1}`,
    vote: 10,
    id: start + i,
  }));
};

export default App;

Before the change only onEndReached is called, after the change both onStartReached and onEndReached is called.

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Contributor A React Native contributor. labels Feb 6, 2024
@janicduplessis
Copy link
Contributor Author

cc @NickGerleman

@facebook-github-bot facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Feb 6, 2024
@perunt perunt mentioned this pull request Feb 7, 2024
50 tasks
Copy link
Contributor

@cipolleschi cipolleschi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code looks fine to me, thanks for the contribution @janicduplessis

@facebook-github-bot
Copy link
Contributor

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Feb 8, 2024
@facebook-github-bot
Copy link
Contributor

@cipolleschi merged this pull request in 4dcc1d3.

@janicduplessis janicduplessis deleted the @janic/osr-oer branch February 8, 2024 07:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Contributor A React Native contributor. Merged This PR has been merged. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants