[Android] Path animation not working after upgrading to v13.0.0

Bug

Path (and possibly other) animations are seems to be broken for Android after upgrading to v13.0.0, though it works fine for iOS. Initially I was trying a complex animation as part of this project of mine, got stuck looking for solution, then noticed that issue is also with fairly simple animations too (details below). They worked fine after downgrading to previous version 12.4.4

Environment info

React native info output:

 System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M1
    Memory: 111.45 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.6.0 - /opt/homebrew/bin/npm
    Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 29, 30, 31, 32
      Build Tools: 30.0.2, 31.0.0, 32.0.0, 32.1.0
      System Images: android-32 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8815526
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_332 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.2 => 0.68.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 13.0.0

Steps To Reproduce

1. Just try the sample code I share below with v13.0.0
2. Try to downgrade to previous version 12.4.4, and the animation should be working without any code changes required.

Note:- I’m not aware of any installation changes after v13.0.0, so it was just me changing version and running again. I also didn’t get any compile time error or crashes when switching the versions and I’m also not using Fabric.

Describe what you expected to happen:

I expect it to work same as it is working when using v12.4.4.

Short, Self Contained, Correct (Compilable), Example

I tried this code sample from react-native-reanimated docs (with some modifications to repeat the animation). The reanimated version I used is 2.9.1

import React, { useEffect } from 'react';
import Animated, {
  useSharedValue,
  useAnimatedProps,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';
import Svg, { Path } from 'react-native-svg';

const AnimatedPath = Animated.createAnimatedComponent(Path);

export default () => {
  const radius = useSharedValue(50);

  useEffect(() => {
    radius.value = withRepeat(withTiming(100, { duration: 1000 }), -1, true);
  }, [radius]);

  const animatedProps = useAnimatedProps(() => {
    // draw a circle
    const path = `
    M 100, 100
    m -${radius.value}, 0
    a ${radius.value},${radius.value} 0 1,0 ${radius.value * 2},0
    a ${radius.value},${radius.value} 0 1,0 ${-radius.value * 2},0
    `;

    return { d: path };
  });

  // attach animated props to an SVG path using animatedProps
  return (
    <Svg>
      <AnimatedPath animatedProps={animatedProps} fill="black" />
    </Svg>
  );
};

Now just to remove the doubt whether it is an issue with reanimated or rn-svg, I replicated the animation using bare react-native Animated API and the issue was same:

import React, { useEffect, useRef } from 'react';
import { Animated } from 'react-native';
import Svg, { Path } from 'react-native-svg';

const AnimatedPath = Animated.createAnimatedComponent(Path);

const startPath = `
M 100, 100
m -50, 0
a 50,50 0 1,0 100,0
a 50,50 0 1,0 -100,0
`;
const endPath = `
M 100, 100
m -100, 0
a 100,100 0 1,0 200,0
a 100,100 0 1,0 -200,0
`;

export default () => {
  const radius = useRef(new Animated.Value(50));

  const path = radius.current.interpolate({
    inputRange: [50, 100],
    outputRange: [startPath, endPath],
  });

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(radius.current, {
          toValue: 100,
          duration: 1000,
          useNativeDriver: true,
        }),
        Animated.timing(radius.current, {
          toValue: 50,
          duration: 1000,
          useNativeDriver: true,
        }),
      ]),
      { iterations: -1 },
    ).start();
  }, []);

  return (
    <Svg>
      <AnimatedPath d={path} fill="black" />
    </Svg>
  );
};

Have a look at the attached video, where iOS is working fine playing the expected animation, but nothing happens on Android

https://user-images.githubusercontent.com/46301285/187028269-dcb0c3df-f49f-4265-abdb-301fee81f228.mov

I think this is enough info to reproduce the issue. If you need another example, I also tried the code from this article.

Thank you!

[WoLewicki]

Could you check if applying https://github.com/react-native-svg/react-native-svg/pull/1843 fixes the issue?

[Aashu-Dubey]

Could you check if applying #1843 fixes the issue?

Yes, It’s working for me too. Thanks!