rn-circle-progress

React Native Progress Circle

Features

• Custom colors
• Custom size and border radius
• Light-weight: No other dependencies besides react-native

Installation

yarn add rn-circle-progress

or

npm install rn-circle-progress

Usage

import ProgressCircle from "rn-circle-progress";

return (
  <ProgressCircle
    percent={30}
    radius={50}
    borderWidth={8}
    color="#3399FF"
    shadowColor="#999"
    bgColor="#fff"
  >
    <Text style={{ fontSize: 18 }}>{"30%"}</Text>
  </ProgressCircle>
);

Props

Name	Description	Type	Required	Default Value
percent	The percentage used for displaying the progress	Number	✓
radius	The radius in px of the component (including border)	Number	✓
borderWidth	The border width in px	Number	✓
color	The border color	String		'#f00'
shadowColor	The background color of the border	String		'#999'
bgColor	The inner background color of the component	String		'#e9e9ef'
children	The children to render inside this component	Node		null
containerStyle	The custom styling which will be applied to the container of the children	Style		null
outerCircleStyle	The custom styling which will be applied to the outer circle	Style		null

Author

M JUNAID

License

MIT