Skip to content

Latest commit

 

History

History
70 lines (49 loc) · 2.27 KB

README.md

File metadata and controls

70 lines (49 loc) · 2.27 KB
Raw

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

ezgif-5-9760a86721

Example Usage

    import {Progress} from '@bayramitto/react-native-sneaky-progress';

    <Progress
        numberOfCurves={4}
        step={this.state.currentStep}
        totalSteps={20}
        stepSize={12}
        fontSize={10}
        strokeWidth={20}
        background={imagesTask.task_progress_bg}
        backgroundProps={{}}
        backgroundColor={"#EEEEEE"}
        strokeColor={"#6FD904"}
        backgroundShadowColor={"#000000"}
        textColor={"#000000"}
        onStep={x => console.log("current step", x)}
    />

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