Import from react-native-reanimated causes webview full reload on its style change

[zarv1k]

Description

In project that uses react-native-webview and react-native-reanimated there are some anomalies while using this libraries together on Android. If you just import an use (even just console) something from react-native-reanimated the Webview on its props change goes to full component reload.

There is no such issue on iOS and I was able to reproduce it on Android only.

Screen.Recording.2024-12-10.at.17.17.17.mov

Steps to reproduce

0. Open provided example repository and run the provided example on Android to reproduce the issue:
1. Press "Get started" on webpage
2. Press "change webview style" and you can see unexpected the webivew full reload on Android. That's the issue.
3. Comment out the line console.log(useAnimatedStyle); in TestComponent, so that there is no more any usage from react-native-reanimated
4. Open dev menu and press reload
5. Repeat steps 1-2 from this list to ensure that there is NO more issue with webview full reload on Android.

Snack or a link to a repository

https://github.com/zarv1k/WebviewPropsChangeReloadIssue

Reanimated version

3.16.3

React Native version

0.76.3

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[zarv1k]

Actually I'm not sure whether it's the issue in react-native-reanimated or in react-native-webview. I'm going to open the similar issue in react-native-webview repository.