search

software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
8.82k stars 1.29k forks source link

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

Open chriscoomber opened 1 month ago

chriscoomber commented 1 month ago

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
  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 commented 1 month ago

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?