Animating Svg component does not work on android

Description

I am working on a progress loader component. The animation works on ios, but it doesn’t work on android. I have tried it on a couple of different emulators as well as as actual devices, the the animation just does not render

Steps to reproduce

Below is the code for the whole component

import React, { useEffect } from "react";
import { Modal, StyleSheet, Text, View } from "react-native";
import Animated, {
  useAnimatedProps,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";
import Svg, { Circle } from "react-native-svg";


const CIRCLE_LENGTH = 201; // 2 * PI * r
const RADIUS = CIRCLE_LENGTH / (2 * Math.PI); // C / (2 * PI)
const STROKE_LENGTH = 4;

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export default function App() {
  const progress = useSharedValue(0);

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

  const animatedProps = useAnimatedProps(() => ({
    strokeDashoffset: CIRCLE_LENGTH * (1 - progress.value),
    strokeDasharray: CIRCLE_LENGTH,
  }));
  const baseCircleProps = {
    cx: RADIUS + STROKE_LENGTH / 2,
    cy: RADIUS + STROKE_LENGTH / 2,
    r: RADIUS,
    strokeWidth: STROKE_LENGTH,
    stroke: "#EEEEEE",
    // strokeLinecap: "round",
  };
  const baseAnimatedCircleProps = {
    ...baseCircleProps,
    stroke: "#161925",
    transform: `rotate(${-90},${RADIUS + STROKE_LENGTH / 2},${
      RADIUS + STROKE_LENGTH / 2
    })`,
  };

  return (
    <Modal animationType="fade" transparent={true} visible={true}>
      <View style={styles.background}>
        <View style={styles.progressContainer}>
          <Svg>
            <Circle {...baseCircleProps} />
            <AnimatedCircle
              animatedProps={animatedProps}
              {...baseAnimatedCircleProps}
            />
          </Svg>
          <Text numberOfLines={1} style={styles.loadingText}>
            Signing in...
          </Text>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  background: {
    backgroundColor: "#FFFFFF",
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  progressContainer: {
    width: RADIUS * 2 + STROKE_LENGTH,
    height: RADIUS * 2 + STROKE_LENGTH,
  },
  loadingText: {
    lineHeight: 20,
    fontSize: 16,
    textAlign: "center",
    marginTop: 27,
    overflow: "visible",
  },
});

Snack or a link to a repository

https://snack.expo.dev/@ianyimiah/reanimated-circular-progress-loader

Reanimated version

2.9.1

React Native version

0.69.5

[iM-GeeKy]

I’m posting here in the case this is an upstream issue, but I’m getting the error posted in the screenshot here and posted some findings here. Any insight would be appreciated.

[iM-GeeKy]

The error from video should be resolved by adding this line: 8cf4068#diff-73bfcd6b9672fc9694913b10a232038470557fd02a8d688932f64cdc4dc26fbfR111. Can you check if it is present in your project files? It should be there in 13.5.0

Upgrading to 13.5.0 did resolve the issue. I appreciate the quick response! 🙌🏻