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.
Which react-spring target are you using?
@react-spring/web
@react-spring/three
@react-spring/native
@react-spring/konva
@react-spring/zdog
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
ornpx 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