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! 👋

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?

[MatiPl01]

Hey!
If you encounter this issue, can you try using the following code and let me know if it works?

circleSize.value = withRepeat(
    withSequence(
      withTiming(110, { duration: 1000 }),
      withTiming(0, { duration: 0 })
    ),
    -1
  );
  circleOpacity.value = withRepeat(
    withSequence(
      withTiming(0, { duration: 1000 }),
      withTiming(0.8, { duration: 0 })
    ),
    -1
  );
}

Basically, I add withSequence to the withRepeat, which resets the value to the desired initial value. Duration is set to 0, so the value should retain its initial state immediately.

I was trying to reproduce the issue using the latest reanimated version but I cannot see the problem, even if I was using the same code as provided in this issue repro. Maybe upgrading reanimated to the latest version will help you as well with no need to update the implementation.

[exzos28]

Hi! It makes sense. I've faced the same problem.

[exzos28]

@MatiPl01 it doesn't help

[MatiPl01]

@MatiPl01 it doesn't help

Can you provide a repro? I will take a look and check what is wrong.

[exzos28]

@MatiPl01 https://snack.expo.dev/-dhxdfPtAoOXMlvtSavoY

[exzos28]

Locally, it looks like this

Screen.Recording.2024-07-15.at.20.31.24.mov

There is a weird frame

[exzos28]

it looks like the error is present when position: absolute and opacity are used.
If opacity is 1 or absolute is not used, everything is ok.

[MatiPl01]

it looks like the error is present when position: absolute and opacity are used. If opacity is 1 or absolute is not used, everything is ok.

Thank you for explanation. I can reproduce the issue but only on Android. Have you tested on iOS as well (and if you tested, have you seen the same issue on iOS)?

[exzos28]

@MatiPl01 ios and web are okay

[MatiPl01]

@MatiPl01 ios and web are okay

Thanks, I will look into that. Thank you for details.