B4ckes commented 4 years ago

Question

Hi, in the project where i'm working, we have an animated svg in the splash screen. It is being animated with the following interpolate:

const [animatedColorValue] = useState(new Animated.Value(0))

const strokeDasharray = animatedColorValue.interpolate({
  inputRange: [0, 1],
  outputRange: [100, 523],
})

The AnimatedPath:

const AnimatedPath = Animated.createAnimatedComponent(Path)

<AnimatedPath
          d='M40.5961 7.17456H2.57401V15.4744H24.7818L0.230469 51.3812H38.2536V43.0814H16.0448L40.5961 7.17456Z'
          fill={fill}
          stroke={stroke}
          strokeDasharray={strokeDasharray}
          strokeDashoffset='100'
          strokeWidth='1px'
        />

It works fine on iOS, but on Android i'm getting this crash:

Screenshot_1603204119

Can anyone help me with this?

System info:

System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.39 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.7.0 - ~/.nvm/versions/node/v14.7.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v14.7.0/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v14.7.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 12.2/12B5025f - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_265 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

A-ANing commented 3 years ago

const AnimatedC = Animated.createAnimatedComponent(Circle);

...

    state={
        circleRadius:  new Animated.Value(0)
    }

    componentDidMount(){

        this.state.circleRadius.addListener( (circleRadius) => {
            this._myCircle.setNativeProps({ strokeDasharray: [circleRadius.value.toString(),314] });
          });

          setTimeout( () => {
            Animated.spring( this.state.circleRadius, { toValue: 100, friction: 3 } ).start();
          }, 2000)

    }

    ...

    <AnimatedC  
    ref={ (e)=>this._myCircle=e }
    cx="50%" cy="50%" r="50" strokeWidth="6" fill="none"
    stroke="url(#gradient)" 
    strokeLinejoin="round" strokeLinecap="round"
    transform="rotate(-90 55 55)"
    >
    </AnimatedC>

Hi ! You can use animation like this

WoLewicki commented 1 year ago

I checked it on the newest main and it seems to work correctly on both iOS and Android so I will close this issue then. Feel free to comment here if something is wrong and we can always reopen it then.

software-mansion / react-native-svg

Can't animate 'strokeDasharray' on Android (Crashing) #1481

Question

System info: