React Native Sneaky Progress

Description

This component is a Progress Stepper that can be used to progress through several steps in the progress bar. Built with React Native Skia and Reanimated v3.

Installation

npm i @bayramitto/react-native-sneaky-progress

or

yarn add @bayramitto/react-native-sneaky-progress

Preview

Example Usage

1    import {Progress} from '@bayramitto/react-native-sneaky-progress';
2
3    <Progress
4        numberOfCurves={4}
5        step={this.state.currentStep}
6        totalSteps={20}
7        stepSize={12}
8        fontSize={10}
9        strokeWidth={20}
10        background={imagesTask.task_progress_bg}
11        backgroundProps={{}}
12        backgroundColor={"#EEEEEE"}
13        strokeColor={"#6FD904"}
14        backgroundShadowColor={"#000000"}
15        textColor={"#000000"}
16        onStep={x => console.log("current step", x)}
17    />

Properties

Prop	Default	Type	Description
numberOfCurves	4	number	Number of curves in the progress bar
step	0	number	Current step in the progress bar
totalSteps	20	number	Total number of steps in the progress bar
stepSize	12	number	Size of the step in the progress bar
fontSize	10	number	Font size of the step in the progress bar
strokeWidth	20	number	Stroke width of the step in the progress bar
background	imagesTask.task_progress_bg	string	Background image of the progress bar
backgroundProps	{}	object	Background image props of the progress bar
onStep	x => console.log("current step", x)	function	Callback function when step changes in the progress bar
backgroundColor	#EEEEEE	string	Background color of the progress bar
strokeColor	#6FD904	string (HEX)	Stroke color of the progress bar
backgroundShadowColor	#000000	string	Background shadow color of the progress bar
textColor	#000000	string	Text color of the progress bar

License

MIT

Author

Bayram Arif