weird layout issues after re-renders on components with overflow: 'hidden' style applied (iOS only)

[zarv1k]

Description

Weird component layout styles after re-render FlatList items that have components with overflow: 'hidden' style applied.

It reproduces in stable manner on iOS only, using either Expo 52 or react-native 0.76.5 with new arch enabled in bridgeless mode.

Steps to reproduce

Please open and run reproducer snack on iOS and follow the steps on the screen or use the following steps:

1. Type something into the input below to filter list items, e.g. type "1"
2. Clear the input and look at the list after re-render. You can see wierd layout of components that have overflow: hidden style. So it's the issue.
3. Turn switch OFF to disable 'overflow: hidden' styles on components.
4. Filter items using text field again and you can see that there are no more issues with layout when 'overflow: hidden' style is not applied to components.

React Native Version

0.76.5

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer, Bridgeless - The New Initialization Flow

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 14.5
  CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Memory: 53.95 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.18.1
    path: ~/.nvm/versions/node/v20.18.1/bin/node
  Yarn:
    version: 4.5.3
    path: /usr/local/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.1/bin/npm
  Watchman:
    version: 2024.04.01.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.11.3
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK:
    API Levels:
      - "34"
      - "35"
    Build Tools:
      - 34.0.0
      - 35.0.0
    System Images:
      - android-35 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12700392
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/zarv1k/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 16.0.0
    wanted: 16.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

-

Reproducer

https://snack.expo.dev/@zarv1k/react-native-0-76-5-overflow-hidden-bug?platform=ios

Screenshots and Videos

Screen.Recording.2024-12-26.at.00.21.26.mov

Screen.Recording.2024-12-26.at.00.26.50.mov

[zarv1k]

Just checked in [email protected] - the issue is fixed in this version.