useDynamicAnimation

useDynamicAnimation is a hook that lets you use style objects dynamically, rather than using static variants.

It has all the same performance benefits of useAnimationState, with a more expressive API.

`useDynamicAnimation(initialState?)`#

const animation = useDynamicAnimation(() => {
  // optional function that returns your initial style
  return {
    height: 100,
  }
})

const onLayout = ({ nativeEvent }) => {
  animation.animateTo({
    ...animation.current,
    height: nativeEvent.layout.height,
  })
}

// pass the animation to state of any Moti component
return <MotiView state={animation} />

Benefits#

High performance
Zero re-renders
Animations run on the native thread
Easy API

Arguments#

Receives one (optional) argument: a pure function which returns the initial state. This is similar to React useState's first argument.

const animation = useDynamicAnimation(() => {
  // this is your initial state
  return {
    height: 100,
  }
})

Returns#

`current`#

Get the current animation state. Unlike useState's return value, this can be safely read and accessed synchronously.

const animation = useDynamicAnimation(() => {
  // this is your initial state
  return {
    height: 100,
  }
})

const onPress = () => {
  console.log(animation.current) // { height: 100 }
}

`animateTo(next)`#

A function to animate to your next state. This is a worklet, so you can call it from the native thread.

const animation = useDynamicAnimation(() => {
  return {
    height: 100,
  }
})

const onPress = () => {
  animation.animateTo({ height: 200 })
}

You can also pass a function which receives the current style and returns the next state:

const animation = useDynamicAnimation(() => {
  return {
    height: 100,
    width: 100,
  }
})

const onPress = () => {
  animation.animateTo((current) => ({ ...current, height: 200 }))

  // or, you could do this! they're the same
  animation.animateTo({
    ...animation.current,
    height: 200,
  })
}

Do not destructure#

// 😡 don't do this
const { current, animateTo } = useDynamicAnimation()

// ✅ do this!
const animation = useDynamicAnimation()

Sequences#

Any Moti styles are valid here. For example, if you want a sequence animation, just pass an array.

const animation = useDynamicAnimation(() => {
  return {
    opacity: 1,
  }
})

const onPress = () => {
  aniamtion.animateTo({
    // sequence
    opacity: [1, 0.5, { value: 0, delay: 1000 }],
  })
}

Full example: Touchable pulse#

import React from 'react'
import { MotiView, useDynamicAnimation } from 'moti'
import {
  TapGestureHandler,
  TapGestureHandlerGestureEvent,
} from 'react-native-gesture-handler'
import { useAnimatedGestureHandler } from 'react-native-reanimated'

export default function HoverPulse({
  scaleTo = 1.05,
  style,
  children,
  ...props
}) {
  const animation = useDynamicAnimation(() => ({
    // this is the initial state
    scale: 1,
  }))

  const onGestureEvent = useAnimatedGestureHandler<TapGestureHandlerGestureEvent>(
    {
      onStart: () => {
        animation.animateTo({ scale: scaleTo })
      },
      onFinish: () => {
        animation.animateTo({ scale: 1 })
      },
    }
  )

  return (
    <TapGestureHandler onGestureEvent={onGestureEvent}>
      <MotiView style={style} state={animation}>
        {children}
      </MotiView>
    </TapGestureHandler>
  )
}