1.0.1 • Published 2 years ago
progress-bar-rn v1.0.1
progress-bar-rn
A light and simple progress bar component created for React Native
Installation
npm install progress-bar-rn
Usage
import ProgressBar from "progress-bar-rn";
<ProgressBar
containerShadowStyle={{ ... }}
trackColor={"#00A0E9"}
trackStyle={{
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomRightRadius: 10,
}}
type={'timing'} // optional
animationStarted={state.alarmStatus === 'pending'} // only useful when type is timing
duration={60 * 1000} // only useful when type is timing
initialValue={currentProgress}// only useful when type is timing
progress={50}
style={{
borderRadius: 10,
backgroundColor: "black",
marginHorizontal: 15,
paddingVertical: 20,
marginBottom: 20,
}}
>
/* children components */
</ProgressBar>
Props
Prop | Description | Default |
---|---|---|
containerShadowStyle | Set shadow of container | none |
trackColor | Set color of track | none |
trackStyle | Set style of track | none |
progress | Set current progress percentage, e.g. 50 | 0 |
style | Set style of container | none |
type | optional: timing When type is set to timing, then the increment of the progress bar will be continuous | none |
initialValue | optional Used to set where the continuous increment starts | 0 |
duration | optional Used to set the duration (in ms) of the continuous increment from 0 to 100 | 500 |
animationStarted | Set whether or not the continuous increment is started | false |