facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.06k stars 24.31k forks source link

FlatList - Some elements are not displayed when using initialScrollIndex #41163

Open chfinst opened 1 year ago

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:

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

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 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

JoshuaAYoung commented 9 months ago

Also running into the same issue.

huanguolin commented 8 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 6 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 5 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 4 months ago

same here, RN 0.73.8

franckmaurin commented 1 month ago

same here, RN 0.73.9

PetromirDev commented 5 days 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