v0.16.0

0.16.0 (2021-10-07)

Features

Derived/shared value support for animate prop

Commit: (4ffb25f)

You can now use a Reanimated Derived or Shared value as your animate prop. This is a huge step forward for allowing Moti to work with Gestures and other shared values.

Whereas before you could only animate based on state:

<MotiView animate={{ opacity: loading ? 1 : 0 }} />

Now, you can also animate based on shared values.

const isActive = useSharedValue(false)

const animate = useDerivedValue(() => {
  return { opacity: isActive.value ? 1 : 0 }
})

return <MotiView animate={animate} />

Unlike normal reanimated, you don't use withTiming here. Moti will automatically animate changes for you. And you can customize changes with the transition prop.

TypeScript support

import { MotiAnimationProp } from 'moti'

And pass it to useDerivedValue from reanimated:

const isActive = useSharedValue(false)

useDerivedValue<MotiAnimationProp<ViewStyle>>(() => {
  return {
    opacity: isActive.value ? 1 : 0
  }
}, [])

return <MotiView animate={animate} />

In the future, Moti may export its own hook to wrap this for you.