motifySvg()

import { motifySvg } from 'moti/svg'

A higher-order component that turns any React Native SVG component into an animated moti component. It's the same as motify, but for SVG elements.

import { motifySvg } from 'moti/svg'
import { Svg, Rect } from 'react-native-svg'

const MotiRect = motifySvg(Rect)()

You can now pass any SVG props to the animate property, and they will animate there:

<MotiRect
  animate={{
    // height sequence animation
    height: [50, 100],
    x: visible ? 0 : 10,
  }}
  transition={{
    // default all to timing
    type: 'timing',
    x: {
      // override the transition for x
    },
  }}
/>

This functionality is compatible with all Moti features, including hooks like useDynamicAnimation:

import { Rect } from 'react-native-svg'
import { motifySvg } from 'moti/svg'
import { useDynamicAnimation } from 'moti'

const MotiRect = motifySvg(Rect)()

export default function App() {
  const animation = useDynamicAnimation<ComponentProps<typeof Rect>>(() => ({
    x: 0,
  }))

  return <MotiRect state={animation} />
}

How it works

Under the hood, motifySvg runs Animated.createAnimatedComponent for you, so don't call that yourself.

Instead, just pass a normal View (or its equivalent).

Notice that motifySvg() returns a function. At the moment, the function it returns doesn't take any arguments. But I like this composition pattern, so I built the API this way to account for using the returned function in the future.