rn-circular-progress

Circular progress bar

Usage no npm install needed!

<script type="module">
  import rnCircularProgress from 'https://cdn.skypack.dev/rn-circular-progress';
</script>

README

React Native Circular Progress Bar 🚀

A UI component to show a circular progress bar.

Demo

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