Animated component reset props of fabric component

[pigeonmal]

Description

I'm having a really weird bug. When an Animated component is mounted when you change a prop of a fabric component, it refreshes all the props. But when I remove Animated.View only the changed prop is refreshed, in my video example it's paused={paused} (state). I don't understand how react-native-reanimated can affect components outside of it.

rec-screen.webm

I'm creating my own video player library, but I tested with other libraries I think it's not me.

Steps to reproduce

1. Create a basic fabric native component (I generated it with bob)
2. Add log when a prop is changed
3. Try change prop of the component with and without Animated.View

Snack or a link to a repository

https://github.com/pigeonmal/react-native-video-vlc/tree/main/example

Reanimated version

3.16.7

React Native version

0.77.0

Platforms

Android

JavaScript runtime

None

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[mhoran]

I think this could be related to the commit hook issues discussed in #6776. Since the commit hook is acting on the entire tree, it could inadvertently reset props of an non-animated component as you're experiencing.

[mhoran]

Confirmed this does seem to be an issue with the commit hook. After commenting out https://github.com/software-mansion/react-native-reanimated/blob/3.16.7/packages/react-native-reanimated/Common/cpp/reanimated/Fabric/ReanimatedCommitHook.cpp#L81 and leaving the <Animated.View /> in place, I do not see the other prop setters being called when the video is paused.

Interestingly, this behavior seems to differ between Android and iOS. On Android, unchanged props do not seem to be sent through to native (without Reanimated). In my app on iOS, I do see the setter getting called, though I'm using Expo Modules.

[pigeonmal]

Thank you for the help, I hope this bug can be fixed. It drove me completely crazy. Because when I was developing it, everything worked as I wanted, but as soon as I put it in my app it did all sorts of crazy things. Even more so because the source of the video was in props, so it reloaded the source every time a prop was updated in the component. I ended up adding a check to each method to see if it had actually changed.