Modal React Native is break when using useAnimatedStyle in component

[tamacroft]

Description

before Im upgrade to react native 0.76.1(new arch), Im using react native 0.75.4 and its work fine with old arch. I have trace error why my modal children is not rendered, because i have useAnimatedStyle in component where my modal placed. When i disabled useAnimatedStyle, its not break modal

Steps to reproduce

1. I have card component, inside card is modal and bar component. Inside bar component im using useAnimatedStyle.
2. Open modal inside card component
3. Modal break (children not rendered)

Snack or a link to a repository

https://snack.expo.dev/@tamacroft_expo/2fd4f5

Reanimated version

3.16.1

React Native version

0.76.1

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & production bundle

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[chrfalch]

This one is reported in react-native-screens and in Expo as well.

I've done some research and created a reproduction here.

A report was made in the RNScreens issue that this was working when using REA 3.14.0 and failed starting from REA 3.15.0.

After investigating the commits between the two releases I was able to find the offending PR here:

https://github.com/software-mansion/react-native-reanimated/pull/6214

This one is containing an optimization to how shadow nodes are updated and if we revert this optimization (even tried reverting it from 3.16.1 by doing some manual copy/paste) the issues is no longer happening.

bartlomiejbloniarz - would you be able to take a look?

This is related to the new architecture only.