FlatList - Some elements are not displayed when using initialScrollIndex

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

まず、initialScrollIndex={6}、getItemLayout、10 個の項目を使用した、提供されている FlatList の再現手順を実行し、次に FlatList の仮想化と初期スクロールの処理を追跡します。リストがそのインデックスを先頭に配置できない場合に、初期インデックスより前の項目がスクロールを必要とせず直ちに表示されれば完了です。