On web, with React's strict mode, animations don't work on first render

[chriscoomber]

Description

If you use React's strict mode (e.g. you wrapped your components in <React.StrictMode>, or you are using next.js and have reactStrictMode: true in your next.config.js, which is default for new apps created with create-next-app), animations won't work on web.

Animations are broken until the component is rendered a second time.

It looks like the SharedValue is updating properly, but the animated style is not being properly applied to the Animated.View somehow.

React's strict mode forces every component to be mounted->unmounted->mounted on every mount, and also forces useEffects to be called twice, so it could be related to either of those.

Steps to reproduce

1. Surround your app in <React.StrictMode>
2. Run on web (with react-native-web).
3. Trigger an animation

(For the repro link below, the specific branch I linked is a react-native-reanimated only reproduction. The main branch also has a reproduction, using a gesture from react-native-gesture-handler to provide the animation.)

Snack or a link to a repository

https://github.com/chriscoomber/RNGH-bugrepro-web-strictmode/tree/react-native-reanimated-issue

Reanimated version

3.10.1

React Native version

0.74.3

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[m-bert]

Hi @chriscoomber! Apologies for the delayed response. It seems that it has already been fixed 😅 Though it doesn't work on Reanimated 3.10, I've tested that on nightly and animation works fine on first render. Could you please check if it works?