React-native-animatable: Animate Svg Components ?

[martinezguillaume]

Hi ! I would like to know if this lib can work with SVG components from react-native-svg. I tried to use createAnimatableComponent but nothing is working.

The svg components display well but no animations. (I tried with Svg.Text, Svg.Polygon & Svg.G)

This is basically what I'm doing:

import { Svg } from 'expo'

const AnimatableSvgG = Animatable.createAnimatableComponent(Svg.G)

<AnimatableSvgG
  delay={1000}
  animation="fadeInUp"
  useNativeDriver>
    // ....Svg components
</AnimatableSvgG>

[martinezguillaume]

I succeed to animate Svg with this lib 😃
I'm doing like this for the moment :

I build a generic Animatable SVG component:

import React, { PureComponent } from 'react'
import { createAnimatableComponent } from 'react-native-animatable'

class AnimatedSvg extends PureComponent {
  setNativeProps = props => {
    const { component } = this.refs
    // Need to convert these props into string to animate
    if (props.style && props.style.opacity) {
      const opacityString = props.style.opacity.toString()
      props.fillOpacity = opacityString
      props.strokeOpacity = opacityString
    }
    component && component.root && component.root.setNativeProps(props)
  }

  render() {
    const { component: Component } = this.props
    return <Component ref="component" {...this.props} />
  }
}

export default createAnimatableComponent(AnimatedSvg)

In my render function:

for Text

                  <AnimatedSvg
                    component={Svg.Text}
                    fill="white"
                    animation="fadeIn"
                    fillOpacity={0} // I have to set here the initial opacity, don't know why...
                  >
                    {label}
                  </AnimatedSvg>

for Polygon

                <AnimatedSvg
                  component={Svg.Polygon}
                  points={polygon.map(points => `${points[0]},${points[1]}`).join(' ')}
                  animation="fadeIn"
                  stroke="white"
                  fillOpacity={0} // initial value
                  strokeOpacity={0} // initial value
                />

I don't know much about this lib, I'm sure that it can be improve ! But it can be good to implement this or to add this in the docs ❤️

[MatheusParanhos]

Thanks Martinez, I was looking for this too!