React Native Segmented Progress Bar

A React Native progress bar that animates and draws the progress in a circular path. The progress bar indicator can move in number of segments to imply the percentage of the progress.

The following are customizable:

• The circular track color
• Indicator color
• Number of segments PS: we recommend you to use a maximum value of 10
• Center element can be customized (e.g. you can pass a component that will be rendered)
• Stroke width of a single segment
• Radius of the component

Installing

With npm

npm install react-native-svg
npm install @baby-journey/rn-segmented-progress-bar --save

With yarn

yarn add react-native-svg
yarn add @baby-journey/rn-segmented-progress-bar

Usage

Step 1: import the package

1import RNSegmentedProgressBar, { RunAnimationHandler } from '@baby-journey/rn-segmented-progress-bar';

Step 2: create a ref

1const circularProgressRef = React.useRef<RunAnimationHandler>(null);

Step 3: use the ref in a useEffect and run

1React.useEffect(() => {
2    circularProgressRef?.current?.run({
3      progress: 75,
4    });
5  }, []);

Step 4: include the component as follows

1<RNSegmentedProgressBar
2  ref={segmentedProgressBarRef}
3  radius={114}
4  strokeWidth={14}
5  segmentsGap={30}
6  segments={4}
7/>

Examples

1. Single circle

2. Mutiple segments

3. Multiple segments with progress circle

Props

Prop	Description	Type	Default Value	Required
radius	Radius of the progress indicator	Number	100	True
strokeWidth	Thickness of the circular track	Number	10	True
tintColor	Color of the circular track	rgba	#FFEDE1	False
fillColor	Color of the progress indicator	rgba	#F39E93	False
segments	Number of segments	Number	3	False
segmentsGap	Gap between segments	Number	0	False
centerComponent	A component used to display the percentage of the progress	React.ReactNode	-	False
indicator	A colored progression path which shows the completed percentage	Object. Refer IndicatorProps interface given below.	-	False

Indicator interface:

interface IndicatorProps {
  show?: boolean;
  radius?: number;
  strokeWidth?: number;
  color?: string;
}

License

Author

• BabyJourney - BabyJourney