nandorojo/moti

[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

Screenshot 2023-08-02 at 13 10 58

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 🤞