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

[markaustinws]

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 [email protected]
npm info using [email protected]
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