FlatList - Some elements are not displayed when using initialScrollIndex

chfinst commented 1 year ago

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] commented 1 year ago

: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 commented 1 year ago

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

NickGerleman commented 1 year ago

Is this specific to when using getItemLayout?

chfinst commented 1 year ago

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

andreialecu commented 1 year ago

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

sdfricke commented 10 months ago

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 commented 10 months ago

Also running into the same issue.

huanguolin commented 9 months ago

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 commented 7 months ago

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 commented 6 months ago

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

huanguolin commented 6 months ago

@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 commented 5 months ago

Confirmed that this is still not fixed in RN 0.74.1.

KingAmo commented 5 months ago

same here, RN 0.73.8

franckmaurin commented 2 months ago

same here, RN 0.73.9

PetromirDev commented 4 weeks ago

I had the same issue and noticed that the Flatlist renders exactly 10 elements. My workaround is to pass:

maxToRenderPerBatch={20}

to the Flatlist where 20 can be any suitable number.

RN version: 0.70.5

facebook / react-native