FlatList > Orientation change > Different Item Heights for Portrait and Landscape Do Not Persist Scroll Position Correctly

Description

render items have a different height (landscape = 50 portrait = 200)

When scrolling down a list of flat list items, when the orientation is changed (from portrait to landscape and vise versa), the current scroll position is incorrect.

It seems to retail the current scroll position in pixels and not by the viewable items that were present pre orientation change?

Note that if you're at the top of the list, there is no issue. It's only when you have scrolled down the list.

I have tried capturing the top viewable item on onViewableItemChanged and attempting to use the ref's scrollToIndex, but to no avail.

Steps to reproduce

Install and execute the application
Scroll down the list
Change orientation
The previously viewable items are no longer in view

React Native Version

0.76.5

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

npm verbose cli C:\Program Files\nodejs\node.exe C:\Users\MarkAustin\AppData\Roaming\nvm\v22.12.0\node_modules\npm\bin\npm-cli.js
npm info using npm@10.9.0
npm info using node@v22.12.0
npm verbose title npm exec react-native info
npm verbose argv "exec" "--" "react-native" "info"
npm verbose logfile logs-max:10 dir:d:\workspace\npm-cache\_logs\2024-12-18T15_49_53_732Z-
npm verbose logfile d:\workspace\npm-cache\_logs\2024-12-18T15_49_53_732Z-debug-0.log
info Fetching system and libraries information...
(node:27612) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
System:
  OS: Windows 11 10.0.26100
  CPU: (22) x64 Intel(R) Core(TM) Ultra 7 155H
  Memory: 12.54 GB / 31.70 GB
Binaries:
  Node:
    version: 22.12.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 10.9.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-242.23339.11.2421.12550806
  Visual Studio:
    - 17.12.35506.116 (Visual Studio Enterprise 2022)
Languages:
  Java: 17.0.13
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

npm verbose cwd D:\Workspace\rn-replications\flatlist-orientiation\ReproducerApp
npm verbose os Windows_NT 10.0.26100
npm verbose node v22.12.0
npm verbose npm  v10.9.0
npm verbose exit 0
npm info ok

Stacktrace or Logs

N/A

Reproducer

https://github.com/markaustinws/flatlist-orientiation

Screenshots and Videos

まず、リンクされている flatlist-orientiation の再現コードを実行し、スクロールして向きを変更した後の FlatList を確認します。報告されている onViewableItemChanged と scrollToIndex の試行時の挙動と比較します。Android と iOS で縦向きと横向きを切り替えた後も、以前表示されていた項目が表示されたままになれば完了です。