React-spring: React Native transform issue on 9.0.0-rc.2

[piazzatron]

🐛 Bug Report

I'm attempting to animate the transform property of a View in RN with a useTransition hook. It crashes on runtime with the invariant violation shown below.

It's possible this is user error - but if so, I'm totally stuck, having tried multiple versions of spring & RN to no avail.

// Am I importing these correctly? 
import {animated, useTransition} from "react-spring/native"

const MyComponent = () => {

  const [s, set] = useState(false)

  // Using the new API, hopefully correctly
  const transition = useTransition(s, {
    native: true,
    from: {translateY: 80},
    enter: {translateY: 0},
  })

  return (
      <View>
                {transition(({translateY}, item) => {
                    return (
                      <animated.View style={{transform: [{translateY}]}}>
                           <Text> It worked! </Text>
                      </animated.View>
                    )
                  })}
      </View> 
  )
}

This is the error I receive:

Minimal Repro: https://github.com/piazz/react-native-spring-issue

I'm a huge fan of react-spring and hoping to use this successfully on RN. Thanks for the help!

Environment

• react-spring v9.0.0-rc2
• react-native v0.61

[aleclarson]

Please setup a git repository with a minimal reproduction. Thanks! 👍

[aleclarson]

Side note: You don't need native: true anymore. That's the default

edit: Actually, I don't think native: true was ever supported for React Native.

[piazzatron]

Repro here: https://github.com/piazz/react-native-spring-issue

Interestingly, in this case I'm getting a new error: unrecognized selector

FWIW, the reason I thought I had to pass native: true was due to this post from Paul: https://github.com/react-spring/react-spring/issues/518#issuecomment-461612569
Looks like he wasn't referencing RN though, so my mistake.

[aleclarson]

I'm seeing this in my own project. Looking into it.

[piazzatron]

I see that you put out a commit to fix this - can I try it out and close out this issue? Is there a dev branch I can pull from or something?

Appreciate the quick work 🔥

[aleclarson]

Use the v9 branch and see the CONTRIBUTING.md file for setup instructions. 👍

I will publish the fix tomorrow. I'm waiting for a change in react-three-fiber to be published.

[aleclarson]

Fixed in 9.0.0-rc.3