semi-circle-progress-bar

Semi Circle Progress component for React Native which uses only the native Views and requires no external libraries like react-native-svg or similar.

Features

• Fully customizable
• Animated
• Lightweight

Installation

1. Download package with npm or yarn

npm install semi-circle-progress-bar

yarn add semi-circle-progress-bar

2. Install pods

cd ios && pod install

3. Rebuild the project

npx react-native run-android
npx react-native run-ios

Usage

<SemiCircleProgress
    percentage={35}
    progressColor={"green"}
>
    <Text style={{ fontSize: 32, color: "green" }}>35%</Text>
</SemiCircleProgress>

Props

| Prop | Desciption | Type | Default value | |:-------------------:|:---------------------------------------------:|:-------------------:|:-------------:| | progressShadowColor | Color of the unfilled progress bar | string | "silver" | | progressColor | Color of the filled progress bar | string | "steelblue" | | interiorCircleColor | Bg color where component children reside | string | "white" | | circleRadius | Radius of the semi-circle | number | 100 | | progressWidth | Width of the progress bar | number | 10 | | percentage | Percentage to show in the circle | number | / | | exteriorCircleStyle | Style of the whole circle container | ViewPropTypes.style | / | | interiorCircleStyle | Style of the inner circle container | ViewPropTypes.style | / | | animationSpeed | Speed of the spring animation | number | 2 | | initialPercentage | Sets initial percentage from which to animate | number | 0 | | minValue | Min value of the circle progress | number | / | | maxValue | Max value of the circle progress | number | / | | currentValue | Current value of the circle progress | number | / |

Note

Percentage has higher order, if provided component assumes that you calculated it already and ignores minValue, maxValue and currentValue props

Developed By Awais Ibrar

Buy me a Cup of Coffee

https://www.buymeacoffee.com/awaisibrar9