Fixed strokeDasharray failed to use animation with "useNativeDriver: true" attribute.

[bardliu]

Summary

1. Fixes #55#issuecomment-241074767
   Please see this issue #55#issuecomment-241074767

2. I got an error like String canot be cast to ReadableArray for strokeDasharray.
   

3. strokeDasharray doesn't need extractLengthList.

What are the steps to reproduce (after prerequisites)?

const AnimatedCircle = Animated.createAnimatedComponent(Circle);
this.animatedValue = new Animated.Value(0);
Animated.loop(
    Animated.timing(this.animatedValue, {
    toValue: 100,
    duration: 1250,
    easing: Easing.linear,
    useNativeDriver: true,
    }),
 ).start();

<AnimatedCircle
    cx="15"
    cy="15"
    r="13"
    stroke={color}
    strokeWidth="2.5"
    strokeLinecap="round"
    strokeDasharray={this.animatedValue.interpolate({
    inputRange: [0, 50, 100],
    outputRange: [
        '8.1681408993,73.513268094',
        '40.8407044967,40.8407045967',
        '8.1681408993,73.513268094',
        ],
     })}
     fill="none"
/>

Compatibility

OS	Implemented
iOS	✅
Android	✅

Checklist

• I have tested this on a device and a simulator

[ouoru]

this works well for me :) thanks for your contributions - even if they aren't being merged.

are the ios changes necessary? I noticed animated strokeDashArray is already working for me on ios.

[bardliu]

this works well for me :) thanks for your contributions - even if they aren't being merged.

are the ios changes necessary? I noticed animated strokeDashArray is already working for me on ios.

It is suggested to change together.

[pavel-stryber]

I'm wonder why guys who support this library don't want to merge this solution? It is passed 3-years and we still struggling with a way how to make svg animatable on Android.

[WoLewicki]

Closing since #2089 has been merged. Thanks for your contribution 🚀