0.18

yarn add moti

Fixes

• Fix MotiPressable on Android, closing #179 #143

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
• 🍿 Finally! VSCode Autoimport support for moti/skeleton and moti/interactions

animate prop as derived value

✅ This feature is working! You can pass the result of useDerivedValue.

const x = useSharedValue(0)

return (
  <MotiView
    animate={useDerivedValue(() => {
      return { translateX: x.value }
    })}
  />
)

This also works for transition and exitTransition:

const x = useSharedValue(0)

return (
  <MotiView
    transition={useDerivedValue(() => {
      return { type: x.value > 0 ? 'timing' : 'spring' }
    })}
  />
)

Breaking Changes

There are zero breaking changes in Moti 0.18.

In the next version, the already-deprecated @motify/skeleton will be removed in favor of moti/skeleton. The same goes for @motify/interactions → moti/interactions.

In the next release, @motify/components and @motify/core will be deprecated, so if you import from those (which you shouldn't anyway), please change those imports to come from moti directly.

Future ideas

(Coming Soon) animate prop factory function

This next feature doesn't work yet, due to a limitation from Reanimated. I opened an issue here: software-mansion/react-native-reanimated#3123. Subscribe to #185 to find out when it's available. In the meantime, you can use a derived value instead of a plain factory function.

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!

(Coming Soon) Pass function child to MotiPressable

This next feature doesn't work yet, due to a limitation from Reanimated. I opened an issue here: software-mansion/react-native-reanimated#3123. Subscribe to #185 to find out when it's available.

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>