react-native-progress-rings

Examples

Basic Ring

<ActivityRings
  strokeWidth={10}
  radius={50}
  strokeColor="#22A9EA"
  strokeSecondaryColor="#28FFAE"
  percentage={80}
/>

Multiples Rings

<ActivityRings
  radius={85}
  multiple={
    [
      {
        strokeWidth: 15,
        radius: 75,
        strokeColor: '#EDAD2B',
        strokeSecondaryColor: '#DF1B47',
        percentage: 40,
      },
      {
        strokeWidth: 15,
        radius: 58,
        strokeColor: '#28FFAE',
        strokeSecondaryColor: '#22A9EA',
        percentage: 60,
      },
      {
        strokeWidth: 15,
        radius: 36,
        strokeColor: '#802BED',
        strokeSecondaryColor: '#C41BDF',
        percentage: 80,
      }
    ]
  }
/>