React Native Circular Progress Bar 🚀

A UI component to show a circular progress bar.

Installation

RN-Circular-Progress is dependent with react-native-svg library.

npm install --save react-native-svg
npm install --save rn-circular-progress

yarn add react-native-svg
yarn add rn-circular-progress

Usage

import CircularProgress from 'rn-circular-progress'

render() {
  return (
    <View style={styles.mainContainer}>
      <CircularProgress progress={progress} size={{ width: 200, height: 200 }} progressColor={rgb(134, 65, 244)}>
        {children}
      </CircularProgress>
    </View>
  )
}

Properties

| Prop | Type | Description | |---|---|---| |progress|Number|Actual progress data of the component| |size|Object({ width, height })|The dimension of the component.| |progressColor|String|The progressing color.|

License

MIT