React-native-rounded-progress-bar NPM

RoundedProgressBar

RoundedProgressBar is a native progress bar made in Kotlin and Swift which is renderized natively for Android and iOS devices.

rounded progress bar

Features

Custom colors for background and foreground
Custom size for background and foreground
Set a different radius
Light, there is no dependencies there

Installation

$ yarn add react-native-rounded-progress-bar
cd ios/ && pod install

Usage

import RoundedProgressBar from "react-native-rounded-progress-bar";

<RoundedProgressBar
  percent={0.75}
  borderWidth={4}
  size={40}
  color="#F02D00"
  bgColor="#DF8BD1"
  backgroundWidth={30}
  progressWidth={30}
  radius={100}
>
  <Text>Loading...</Text>
</RoundedProgressBar>;

Props

Name	Description
percentage	Decimal value used for displaying the progress, for example, 0.5 or 0.25
radius	Size of the radius of the circle
progressWidth	The width of the progress bar
backgroundWidth	The width of the background of the progress bar
progressBarColor	The color of the progress bar
backgroundBarColor	The background color of the border
backgroundColor	The inner background color of the component