pmndrs / react-spring

✌️ A spring physics based React animation library
http://www.react-spring.dev/
MIT License
27.73k stars 1.18k forks source link

[bug]: @react-spring/native animations don't work consistently with addition of @react-spring/three #2294

Open byung806 opened 1 week ago

byung806 commented 1 week ago

Which react-spring target are you using?

What 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.tsx comment out line 20 (the OtherScreen Stack.Screen).

Run with npx expo run:android or npx 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