FlatList - Some elements are not displayed when using initialScrollIndex

[chfinst]

trafficstars

Description

When there is not enough elements to place the initialScrollIndex at the top, elements before initialScrollIndex are not displayed before scrolling.

React Native Version

0.72.6

Output of npx react-native info

System: OS: macOS 13.5.2 CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz Memory: 1.44 GB / 32.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 16.18.1 path: ~/.asdf/installs/nodejs/16.18.1/bin/node Yarn: version: 1.22.19 path: ~/.asdf/installs/nodejs/16.18.1/bin/yarn npm: version: 8.19.2 path: ~/.asdf/plugins/nodejs/shims/npm Watchman: version: 2023.10.09.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.12.1 path: /Users/christianfinstad/.rbenv/shims/pod SDKs: iOS SDK: Platforms: - DriverKit 23.0 - iOS 17.0 - macOS 14.0 - tvOS 17.0 - watchOS 10.0 Android SDK: API Levels: - "30" - "31" - "32" - "33" - "34" Build Tools: - 30.0.2 - 30.0.3 - 31.0.0 - 32.0.0 - 32.1.0 - 33.0.0 - 33.0.1 System Images: - android-22 | Intel x86 Atom - android-28 | Intel x86 Atom_64 - android-30 | Google APIs Intel x86 Atom - android-31 | Intel x86 Atom_64 - android-31 | Google APIs Intel x86 Atom_64 - android-31 | Google Play Intel x86 Atom_64 - android-32 | Google Play Intel x86 Atom_64 - android-33 | Google APIs Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9477386 Xcode: version: 15.0.1/15A507 path: /usr/bin/xcodebuild Languages: Java: version: 11.0.18 path: /usr/bin/javac Ruby: version: 2.6.10 path: /Users/christianfinstad/.rbenv/shims/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.6 wanted: 0.72.6 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Steps to reproduce

const App = () => {
  const renderItem = (item: ListRenderItemInfo<number>) => (
    <View
      style={{
        height: 70,
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>{item.item}</Text>
    </View>
  );

  const getItemLayout = (
    data: ArrayLike<number> | null | undefined,
    index: number,
  ) => ({
    length: 70,
    offset: 70 * index,
    index,
  });

  return (
    <>
      <View style={{height: 700}}>
        <FlatList
          data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
          renderItem={renderItem}
          getItemLayout={getItemLayout}
          initialScrollIndex={6}
        />
      </View>
    </>
  );
};

Snack, screenshot, or link to a repository

https://github.com/facebook/react-native/assets/14904827/2b73b749-2f6d-46c6-8eda-b11ab214e05d

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[chfinst]

Reproducible Snack: https://snack.expo.dev/mCHEtDAet

[NickGerleman]

Is this specific to when using getItemLayout?

[chfinst]

It is specific to when using initialScrollIndex, which requires getItemLayout to be implemented.

[andreialecu]

Also running into broken FlatLists with recent RN versions. Started happening after updating RN.

Possibly related: https://github.com/facebook/react-native/issues/36766 https://github.com/facebook/react-native/issues/39421

[sdfricke]

Same issue here. When I use initialScrollIndex there is nothing rendered above my selected list item if my list isn't long enough to scroll. I'm on version 0.72.6

[JoshuaAYoung]

Also running into the same issue.

[huanguolin]

Same issue here. When I use initialScrollIndex there is nothing rendered above my selected list item if my list isn't long enough to scroll. I'm on version 0.72.6

I'm experiencing this problem exactly as you describe it.

[iminside]

Same issue here. When I use initialScrollIndex there is nothing rendered above my selected list item if my list isn't long enough to scroll. I'm on version 0.72.6

I have a same problem with VirtualizedList (( RN 0.73.6

[kapilkkmr92]

I am also facing this problem. Any solution for this ?

[huanguolin]

@kapilkkmr92 my workaround:

    const selectedValueRef = React.useRef(value);
    React.useEffect(() => {
        selectedValueRef.current = value;
    }, [value]);

    const flatListRef = React.useRef<FlatList>(null);

    React.useEffect(() => {
        if (flatListRef.current) {
            const index = options.findIndex((item) => item.value === selectedValueRef.current);
            if (index !== -1) {
                flatListRef.current.scrollToIndex({ index: index, animated: false });
            }
        }
    }, [options]);

[mars-lan]

Confirmed that this is still not fixed in RN 0.74.1.

[KingAmo]

same here, RN 0.73.8