Allow animations on the d prop of the Path component.

[reneeichhorn]

My use case is that I'm wrapping the Path component with createAnimatedComponent and then simply use react-native-reanimated (their createAnimatedComponent should be compatible to the react-native one)

I debugged the behavior a little bit and when using the wrapped component the app crashes because react-native-svg tries to render with _path = nil and then crashes. To be more detailed:
Elements/RNSVGPath.m::setD is never called and then inRNSVGRenderable.m::renderLayerToit basically calls CFAutorelease with nil and crashes.
I wonder if this related to a wrong or missing setNativeProps.

Anyone having a idea how to fix it.

[msand]

Can you provide a full replication?

[reneeichhorn]

Sure

import { Svg, Path } from 'react-native-svg';
import Animated from 'react-native-reanimated';

const { concat, multiply } = Animated;
const x = multiply(1, 2)
const y = multiply(2, 3)
const path = concat('M 0 0 L ', x, ' ', y)

const AnimatedPath = Animated.createAnimatedComponent(Path);

const DemoComponent = () => (
  <Svg viewport="0 0 10 10" width="100" height="100">
    <AnimatedPath d={path} />
  </Svg>
)

I would do an example without reanimated but there is no way of creating a string from an animated value in react-native animated. Anyway the createAnimatedComponent of reanimated behaves very similar.

This is also a static example without any animation involved but that shouldn't make any difference.

[msand]

A few minor changes needed, stroke was missing and viewport needs to be viewBox instead:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Svg, Path } from 'react-native-svg';
import Animated from 'react-native-reanimated';

const { concat, multiply } = Animated;
const x = multiply(1, 2);
const y = multiply(2, 3);
const path = concat('M 0 0 L ', x, ' ', y);

const AnimatedPath = Animated.createAnimatedComponent(Path);

const DemoComponent = () => (
  <Svg viewBox="0 0 10 10" width="100" height="100">
    <AnimatedPath d={path} stroke="black" />
  </Svg>
);

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <DemoComponent />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
});

But otherwise seems to work fine, with no changes needed to the library.

[msand]

Android required a bit of modification in reanimated, check my pull request here: software-mansion/react-native-reanimated#176

[reneeichhorn]

Wow! Thats amazing, thank you a lot!
So on iOS it was my bad, I was still on version 8 unfortunately, works for me now as well!

[msand]

Also, wrote a small tagged template literal function:

function animatedString(strings, ...values) {
  const arr = [];
  const n = values.length;
  for (let i = 0; i < n; i++) {
    arr.push(strings[i], values[i]);
  }
  const end = strings[n];
  if (end) {
    arr.push(end);
  }
  return concat(...arr);
}

const path = animatedString`M0,0 L${x},${y}`;

[reneeichhorn]

Wow that was fast :D Creating a tagged template was exactly my idea as well 👍

I think there is lots of potential with animated paths especially for charts etc.

[wcandillon]

@msand Haha amazing trick thks ;-)

[stackerine]

I'm new with react-native-reanimated but all my try to interpolate svg path were unsuccessful. Can you help me with a full example?

[wcandillon]

I have a couple examples on my youtube channel, the most recent one is https://www.youtube.com/watch?v=gLopy2MCAqM

[stackerine]

Already saw that! Amazing work... Thank a lot @wcandillon.