0.18 Release

[nandorojo]

yarn add moti@canary

Features

• Performance improvements with faster for-loops
• Pass shared values & derived values from reanimated directly to the animate prop
• Integration with React Native Gesture Handler using the animate function prop
• Pass function child to MotiPressable

Shared Values with animate prop

In addition to a plain object, you can pass a function to the animate prop. As long as it has worklet at the top of the function, you can now use any shared/derived values inside of the animate prop!

These values will automatically animate for you, so you don't need to use withTiming or import any hooks like useAnimatedStyle.

const x = useSharedValue(0)

return (
  <MotiView
    animate={() => {
      'worklet'

      return { translateX: x.value }
    }}
  />
)

This will work with React Native Gesture Handler gestures too!

Pass function child to MotiPressable

As a consequence of the animate function supporting a worklet, I added a function as children of MotiPressable. This looks a lot like the Pressable from react-native. As long as you read interaction.value inside of the animate worklet, it will update responsively.

Notice here that we aren't importing any hooks 😎

<MotiPressable>
  {(interaction) => {
    return (
      <MotiView
        animate={() => {
          'worklet'

          const { pressed, hovered } = interaction.value

          return { opacity: pressed ? 0.9 : 1 }
        }}
      />
    )
  }}
</MotiPressable>

---

This discussion was created from the release 0.18 Release.

[nandorojo]

#185