withRepeat is flickering on android

[MingHieu]

Description

I'm having a great experience with the animation using withTiming, but when I wrap it with withRepeat, it causes flickering.

Code:

const useMicrophoneAnimation = (isRecording: boolean) => {
  const circleSize = useSharedValue(0);
  const circleOpacity = useSharedValue(0.8);

  const circle1AnimatedStyles = useAnimatedStyle(() => ({
    width: circleSize.value,
    height: circleSize.value,
    opacity: circleOpacity.value,
  }));

  const circle2AnimatedStyles = useAnimatedStyle(() => ({
    width: circleSize.value * 1.4,
    height: circleSize.value * 1.4,
    opacity: circleOpacity.value * 0.9,
  }));

  const circle3AnimatedStyles = useAnimatedStyle(() => ({
    width: circleSize.value * 1.8,
    height: circleSize.value * 1.8,
    opacity: circleOpacity.value * 0.8,
  }));

  useEffect(() => {
    cancelAnimation(circleSize);
    cancelAnimation(circleOpacity);
    circleSize.value = 0;
    circleOpacity.value = 0.8;
    if (isRecording) {
      circleSize.value = withRepeat(withTiming(110, {duration: 1000}), -1);
      circleOpacity.value = withRepeat(withTiming(0, {duration: 1000}), -1);
    }
  }, [isRecording, circleSize, circleOpacity]);

  return {circle1AnimatedStyles, circle2AnimatedStyles, circle3AnimatedStyles};
};

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

<View style={styles.microphoneAnimationWrapper}>
  <AnimatedPressable
    onPress={toggleRecord}
    onPressIn={() => {
      microphoneSize.value = withSpring(0.9);
    }}
    onPressOut={() => {
      microphoneSize.value = withSpring(1);
    }}
    style={[
      styles.microphoneWrapper,
      {
        backgroundColor: color.primary,
        transform: [{scale: microphoneSize}],
      },
    ]}>
    <Image source={require('~assets/images/microphone.png')} />
  </AnimatedPressable>
  <Animated.View
    style={[
      circle1AnimatedStyles,
      styles.microphoneAnimationCircle,
      {backgroundColor: color.primary},
    ]}
  />
  <Animated.View
    style={[
      circle2AnimatedStyles,
      styles.microphoneAnimationCircle,
      {backgroundColor: color.primary},
    ]}
  />
  <Animated.View
    style={[
      circle3AnimatedStyles,
      styles.microphoneAnimationCircle,
      {backgroundColor: color.primary},
    ]}
  />
</View>;

Ghi.Man.hinh.2024-06-10.luc.11.25.20.mov

Steps to reproduce

NA

Snack or a link to a repository

NA

Reanimated version

^3.11.0

React Native version

0.74.1

Platforms

Android

JavaScript runtime

None

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

None

Device

Android emulator

Device model

Pixel_4_API_34 ( android 14 )

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Steps to reproduce and Snack or a link to a repository sections.

[paragbarsar99]

Are you creating the AnimatedPressable out of component ?

[MingHieu]

Are you creating the AnimatedPressable out of component ?

Yes, is anything wrong?