nithinpp69 / react-native-circular-progress-indicator

react native circular progress indicator library
MIT License
242 stars 54 forks source link

Font for small circles looks broken on Android #79

Open ZRunner opened 2 years ago

ZRunner commented 2 years ago

As the title says, the progress font has a weird behavior on Android when the radius is relatively small (like 20 and less). However this does not occurs on iOS.
I tried both dynamic font scaling and fixed font size.

Could it be a OS-related issue and not something we can fix?

Here is a side-by-side comparison with dynamic font size:

Capture d’écran 2022-08-10 à 16 57 49

And the same one with a progress font size fixed to 12:

Capture d’écran 2022-08-10 à 17 05 05

And the code used:

      <CircularProgress
        value={25}
        duration={0}
        radius={12}
        inActiveStrokeWidth={2}
        activeStrokeWidth={2}
        valueSuffix="%"
      />
      <View style={{height: 10}} />
      <CircularProgress
        value={50}
        duration={0}
        radius={18}
        inActiveStrokeWidth={2}
        activeStrokeWidth={2}
        valueSuffix="%"
      />
      <View style={{height: 10}} />
      <CircularProgress
        value={75}
        duration={0}
        radius={25}
        inActiveStrokeWidth={2}
        activeStrokeWidth={2}
        valueSuffix="%"
      />
khayym commented 1 year ago

Same bug, why this bug is not fixed

khayym commented 1 year ago

@nithinpp69 after one week I found a different solution. You can use react-native-circular-progress

sunil-digimantra commented 3 months ago

I am facing the same issue and still have not found any solution.