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

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

Step 2: create a ref

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

Step 3: use the ref in a useEffect and run

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

Step 4: include the component as follows

<RNSegmentedProgressBar
  ref={segmentedProgressBarRef}
  radius={114}
  strokeWidth={14}
  segmentsGap={30}
  segments={4}
/>

Examples

1. Single circle

2. Mutiple segments

3. Multiple segments with progress circle

Props

Indicator interface:

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

License

Author

• BabyJourney - BabyJourney