Active Progress Keep Appearing with Value 0 on Android

[Vikraardiansyah]

trafficstars

the active progress keep appearing even though the value is 0, it's only happen on android

[steavenb]

I use CircularProgressBase with a custom child element, so did not have issues with the value. However, the progress indicator has shown a similar issue where it remains with an empty progress after all components have loaded.

As a workaround, I used this: useEffect(() => { InteractionManager.runAfterInteractions(() => { progressRef.current.reAnimate(); }); }, []);

I have observed this issue only after upgrading from RN 0.64 to RN 0.70 and enabling Hermes. I did update react-native-reanimated, but not sure if it gets worse when I upgrade.

[val089]

I have got the same problem on Android.

[mirek11s]

Same here

[troberts-28]

Same here

[troberts-28]

I use CircularProgressBase with a custom child element, so did not have issues with the value. However, the progress indicator has shown a similar issue where it remains with an empty progress after all components have loaded.

As a workaround, I used this: useEffect(() => { InteractionManager.runAfterInteractions(() => { progressRef.current.reAnimate(); }); }, []);

I have observed this issue only after upgrading from RN 0.64 to RN 0.70 and enabling Hermes. I did update react-native-reanimated, but not sure if it gets worse when I upgrade.

This workaround does not work for me. Calling reanimate has no effect on the progress indicator when it gets into this weird state. Interestingly, I'm using several progress indicators around my app, and when one of them displays this behaviour, they all do.

[AgnieszkaUzarek]

@Vikraardiansyah i resolve it that when value is 0 i return color as inActiveStrokeColor example which works for me:

const getCircleColor = (percent: number) => {
    switch (true) {
      case percent === 0:
        return palettes.secondary[90];
      case percent > 0 && percent <= 100:
        return 'blue';
      default:
        break;
    }
  };

return (
    <CircularProgress
      initialValue={initialValue}
      value={percent}
      delay={400}
      activeStrokeColor={getCircleColor(percent)}
      inActiveStrokeColor={palettes.secondary[90]}
      maxValue={100}
    />
  );

[ajay-mandaviya]

can be fixed when value is 0 pass transparent colour

const getCircleColor = (percent: number) => { if (percent === 0) { return 'transparent' } else { return '#13565FD9' } }

This work for me.