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

[Android] FlatList does not update with initialScrollIndex > 0 and not scrollable #33529

Closed
Ainias opened this issue Mar 31, 2022 · 0 comments
Closed

Comments

@Ainias
Copy link

Ainias commented Mar 31, 2022

Description

When the initialScrollIndex is > 0 and the data is not long enough to scroll and then the data is updated, the new elements are not shown.
See the code-example

Version

0.67.4

Output of npx react-native info

System:
    OS: macOS 12.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 278.58 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
    Watchman: 2021.10.18.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 13.3/13E113 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.12 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: ^5.0.1 => 5.0.1 
    react: 17.0.2 => 17.0.2 
    react-native: 0.67.4 => 0.67.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

  1. Paste the code inside your app-component

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

const App = () => {

  const renderItem = useCallback((item: {
  item: {
    title: string
  }
  }) => {
    return (
      <View style={{ height: 70, backgroundColor: '#00ff00' }}>
        <Text>{item.item.title}</Text>
      </View>
    );
  }, []);

  const [data, setData] = useState([{ title: 'Item 1' }, { title: 'Item 2' }]);

  useEffect(() => {
    setTimeout(() => {
      setData([{ title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }, { title: 'Item 4' }]);
    }, 2000)
  }, [])

  return (
    <SafeAreaView>
      <FlatList
        data={data}
                renderItem={renderItem}
        initialScrollIndex={1} />
    </SafeAreaView>
  );
};
AntoineDoubovetzky pushed a commit to AntoineDoubovetzky/react-native that referenced this issue Apr 3, 2022
AntoineDoubovetzky pushed a commit to AntoineDoubovetzky/react-native that referenced this issue Apr 20, 2022
AntoineDoubovetzky pushed a commit to AntoineDoubovetzky/react-native that referenced this issue Apr 20, 2022
Saadnajmi pushed a commit to Saadnajmi/react-native-macos that referenced this issue Jan 15, 2023
…s when data is updated (facebook#33558)

Summary:
Fixes facebook#33529 (note that I reproduced the bug on iOS too).

The bug comes from the fact that we were using `this._scrollMetrics.offset` to determine if the initial scroll was done. But sometimes it equals 0 even after the initial scroll is done, for example when the content does not fill the list. So I replaced it with `this._hasDoneInitialScroll`.
I believe that `this._hasDoneInitialScroll` was not used in the first place because it was introduced later (3 years ago vs 5 years ago for the original code).

The replacement correctly fixes the broken test case and the example given in the issue.

Then I had to update two test cases (rename the first and remove the second), that shows explicitly the broken behavior:
we have to simulate the initial scroll for the content to be adjusted, so when the content does not fill the view and the scroll cannot be executed, the content is not adjusted.

## Changelog

[General] [Fix] - Fix VirtualizedList with initialScrollIndex not rendering all elements when data is updated

Pull Request resolved: facebook#33558

Test Plan:
- I added a broken test case based on the issue
- I tested with the RNTesterApp using the code example given in the issue

Reviewed By: ryancat

Differential Revision: D35503114

Pulled By: yungsters

fbshipit-source-id: 67bb75d7cf1ebac0d59127d0d45afbaa3167dcf3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants