aly-yvette
commented
5 days ago I believe that this may also be happening with the web + three animations. I have a storybook with web components that were working fine, but once I added a component using three, opening the story with the web components would no longer trigger the animation (event without viewing the 3d animation). I'm wondering if there's some sort of conflict between the two reconcilers, both using the same global maybe?
Which react-spring target are you using?
@react-spring/web@react-spring/three@react-spring/native@react-spring/konva@react-spring/zdogWhat version of react-spring are you using?
9.7.3
What's Wrong?
@react-spring/native and @react-spring/three animations don't work well with each other on different screens.
To Reproduce
Clone this example: https://github.com/byung806/react-spring-bug and install npm dependencies as well as
npx expo prebuild.First, in
src/index.tsxcomment out line 20 (the OtherScreen Stack.Screen).Run with
npx expo run:androidornpx expo run:ios. Notice that the text on the home screen fades in on click (as expected).Now, uncomment the commented line from earlier and rerun the expo server. Click the button to go to the other screen, and notice that the text on the other screen fades in on click (as expected) and the 3D scene animations work (as expected).
Now, go back to the home screen. Notice that the text on the home screen no longer fades in on click (unexpected).
Expected Behaviour
Even after the 3D scene (OtherScreen) was added, the @react-spring/native animation on the Home Screen should still work. The HomeScreen code was never changed but its animations stopped working once the new screen was added.
Link to repo
https://github.com/byung806/react-spring-bug