mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00

Files

T

Janic DuplessisandFacebook GitHub Bot 4dcc1d3efb Fix onStartReached not called when list content is small (#42902 )

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

Pull Request resolved: https://github.com/facebook/react-native/pull/42902

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

```ts
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.

Reviewed By: sammy-SC

Differential Revision: D53518434

Pulled By: cipolleschi

fbshipit-source-id: bc34e0d4758df6d5833be7290e5a66efaf252ffd

2024-02-07 20:44:34 -08:00

Interaction

Reconnect VirtualizedList Source History 2/2 (Apply D41745930 + history, D42805202, D43063551)

2023-02-06 20:00:19 -08:00

Lists

Fix onStartReached not called when list content is small (#42902 )

2024-02-07 20:44:34 -08:00

Utilities

Reconnect VirtualizedList Source History 2/2 (Apply D41745930 + history, D42805202, D43063551)

2023-02-06 20:00:19 -08:00

.npmignore

fix[virtualized-lists]: do not ship tests in npm package (#36143 )

2023-02-14 04:12:39 -08:00

index.d.ts

Reconnect VirtualizedList Source History 2/2 (Apply D41745930 + history, D42805202, D43063551)

2023-02-06 20:00:19 -08:00

index.js

Enable lint/sort-imports everywhere (#41334 )

2023-11-06 12:59:38 -08:00

package.json

Bump package versions for next major (#39764 )

2023-10-11 08:36:23 -07:00

README.md

Add missing READMEs & Update package.json in all RN packages (#37090 )

2023-04-28 04:26:20 -07:00

README.md

@react-native/virtualized-lists

Installation

yarn add @react-native/virtualized-lists

Note: We're using yarn to install deps. Feel free to change commands to use npm 3+ and npx if you like

Testing

To run the tests in this package, run the following commands from the React Native root folder:

yarn to install the dependencies. You just need to run this once
yarn jest packages/virtualized-lists.