[bug]: Crash to white screen

[leo-petrucci]

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?

10.0.0

What's Wrong?

I'm trying to use react-spring in an Expo React Native app however the app crashes to white screen as soon as I open it.

To Reproduce

1. I installed @react-spring/native
2. I imported import { useSpring, animated } from "@react-spring/native";
3. Add useSpring to a component
4. App crashes with white screen.

Expected Behaviour

App shouldn't crash.

Link to repo

https://github.com/leo-petrucci/react-spring-native-bug/tree/master

[leo-petrucci]

I just noticed 10.0.0 got released. I updated and now I'm only getting a white screen :/

[dagatsoin]

@leo-petrucci I can reproduce it indeed :(
It affect also the web version. I have no work around for now. I will try to take a look this evening.

[leo-petrucci]

@dagatsoin Thank you! I think the initial issue was caused by me trying to use it with React 19. I'll update the OP/Title

[joshuaellis]

resolved by #2372

[dagatsoin]

@joshuaellis I don't think the last fix solves this, it seems to be an other root cause.

[dagatsoin]

On my test, the loop property blocks the process, so the blank page. Happens on web and native.

[dagatsoin]

@leo-petrucci there is a work around.
It seems to work if you use the function props. In your case:

useSpring(() => ({
    from: { rotate: "0deg" },
    to: [
      { rotate: "0deg" },
      { rotate: "-5deg" },
      { rotate: "5deg" },
      { rotate: "0deg" },
    ],
    config: { duration: 100 },
    loop: true,
}), []);