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.

[cipolleschi]

Thanks @zarv1k for checking this in 0.77!
We will look into this as soon as possible. We appreciate the patience in this slower period due to holidays and the end-of-the-year celebration!

[zarv1k]

@cipolleschi FYI I also have just checked in [email protected] - the issue is fixed in this version.

I tried to find in the changelog and also in issues/PRs and unfortunately could not find the fix. Would be great to point me out on the commit/PR/issue with the fix to make it possible to create a patch for 0.76.5, because some libraries are not ready for 0.77 yet and update to 0.77 is not possible at the moment for me.

[cipolleschi]

It's a bit hard to point out the fix, as some internal people refactor the code quite a bit.
Another fix is coming in this PR: #48414

@joevilches is definitely the best person to answer to your question.

This is the history for 0.77

This is the history for 0.76

There are a few commits there, but the two that more likely fix the issue are:

• Implement outline properties on iOS
• Small perf fix for new iOS view clipping

[zarv1k]

@cipolleschi, thank you so much, your info helped me a lot!

Just checked and can confirm that the subject issue is fixed in 9ee5fff.

Created the following patch for current latest [email protected] for fixing the issue:
react-native-npm-0.76.5-5d90f3e68d.patch