nandorojo / moti

🐼 The React Native (+ Web) animation library, powered by Reanimated 3.
https://moti.fyi
MIT License
3.9k stars 120 forks source link

[MotiPressable]: rendering breaks using animate prop #304

Closed araujobarret closed 11 months ago

araujobarret commented 11 months ago

Is there an existing issue for this?

Do you want this issue prioritized?

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.

nandorojo commented 11 months ago

Remember to add ‘worklet’ at the top of the animate function.

araujobarret commented 11 months ago

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

nandorojo commented 11 months ago

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.

araujobarret commented 11 months ago

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 🤞