react-native-expo-circle-progress v1.0.3

react-native-expo-circle-progress

It's a cross platform component to show circular progress indicator for mobile apps and web as well.

Screenshot

Install and import package

Installation

npm i react-native-expo-circle-progress

Import

import PercentageCircle from 'react-native-expo-circle-progress';

Example Percentage Circles

<PercentageCircle radius={35} percent={50} color={"#3498db"} />
<PercentageCircle radius={35} percent={50} color={"#3498db"} >
  <Text>Example</Text>
  <Text>50%</Text>
</PercentageCircle>
<PercentageCircle radius={35} borderWidth={8} percent={50} color={"#3498db"} >
  <Image source={{ uri: 'https://avatars.githubusercontent.com/u/111197710?v=4' }} style={{ width: 100, height: 100 }} resizeMode='cover' />
</PercentageCircle>
<Text>50%</Text>
<PercentageCircle radius={35} percent={50} color={"#3498db"} >
  <Text>Example</Text>
</PercentageCircle>
<Text>50%</Text>
<PercentageCircle radius={35} percent={50} color={"#3498db"} />
<PercentageCircle radius={35} percent={50} color={"#3498db"} >
  <Text>Example</Text>
  <Text>50%</Text>
</PercentageCircle>
<PercentageCircle radius={35} borderWidth={8} percent={50} color={"#3498db"} >
  <Image source={{ uri: 'https://avatars.githubusercontent.com/u/111197710?v=4' }} style={{ width: 100, height: 100 }} resizeMode='cover' />
</PercentageCircle>
<Text>50%</Text>
<PercentageCircle radius={35} percent={50} color={"#3498db"} >
  <Text>Example</Text>
</PercentageCircle>
<Text>50%</Text>

Props