0.23: SVG (+ more) 🎨

Fixes

• MotiPressable on iOS should now have more consistent behavior. Moti no longer uses React Native Gesture Handler's TouchableWithoutFeedback, instead opting for Pressable.

SVG Support

Moti now has a first-class integration with react-native-svg, making cross-platform, performant SVG animations easier than ever.

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 compatible with all Moti features, including exit transitions & 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} />
}