react-native-cocentric-progress-circle/src/customCircularProgress/CocentricCircle.js

A react native concentric progress circle package

import { View } from 'react-native';
import AnimatedCircularProgress from './AnimatedCircularProgress';
import React from 'react';

const CocentricCircle = ({ data, ...props}) => {
 var dataLength = data.length
 var incrementar = 5
   const renderProgress = () => {
        dataLength--
        incrementar = incrementar + 5
        return (

            <AnimatedCircularProgress
                        // ref={(ref) => this.performanceProgress1 = ref}
                        size={120 - incrementar}
                        width={2}
                        tintColor={'pink'}
                        backgroundColor={'pink'}
                        rotation={0}
                        padding={4.5}
                        lineCap={'round'}
                        fill={80}
                    >
                        {
                            (fill) => dataLength !== 0 && renderProgress()
                            
                        }
                </AnimatedCircularProgress>    
       )
    }

  return (
      <View>
          {renderProgress()}
      </View>
  )
};


export default CocentricCircle;