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 |