[MotiPressable]: rendering breaks using animate prop
araujobarret opened this issue · 4 comments
Is there an existing issue for this?
- I have searched the existing issues
Do you want this issue prioritized?
- Yes, I have sponsored
- Not urgent
Current Behavior
After bumping the reanimated to 3.3.0
MotiPressable
animate
throws an error(see screenshot) when rendering the component.
This is ONLY happening in dev
mode, release
mode shows no crash/error from what we've seen.
Nothing fancy was used as the animation, just the opacity
animation when pressed.
animate={useMemo(
() =>
({ hovered, pressed }) => {
return {
opacity: hovered || pressed ? 0.5 : 1,
}
},
[]
)}
### Expected Behavior
MotiPressable animates without breaking.
### Steps To Reproduce
This PR https://github.com/artsy/palette-mobile/pull/134 commit fixes the error by removing the animation, trying MotiPressable with reanimated v3.3.0, and MotiPressable `animate` throws the error.
### Versions
```markdown
- Moti: 0.24.2
- Reanimated: 3.3.0
- React Native: 0.69.12
Screenshots
Reproduction
https://stackblitz.com/edit/nextjs-wfhfwc?file=pages%2Findex.tsx
only happening in native, looks fine on web.
Remember to add ‘worklet’
at the top of the animate
function.
It's a bit confusing looking at the source of the error, if we're using a hook from reanimated we don't need to use the worklet
keyword anymore when using their hooks(from what they say in their docs). https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/worklets#using-hooks
yeah reanimated needs a better error message.
in this case, we are using useMemo which isn’t a reanimated hook, so you do need to workletize the function. they haven’t added a way for libraries like moti to auto-workletize its own functions, so we have to write it. this is shown in the MotiPressable docs.
Good to know! I'd imagined they will have a better mechanism to move everything to the UI thread, but it's not that sophisticated in reanimated yet.
Thanks for the fast reply and the chat, let's hope for a better reanimated docs in the future 🤞