1.0.24 • Published 3 years ago
react-native-form-progress v1.0.24
| Status | |
|---|---|
| Dependencies |   |
| Package |    |
React Native Form progress
A react native component super useful in displaying progress when user is filling up forms like signup page, setting, information catering etc
Note
- If you find this repo interesting do not forgot to give it a star.
- If you have a feature request than open it on github and feature should be added within 2-7 days (author of the repo would keep you updated)
- If you find a bug, open an issue on github and author would fix it less than 24 hours
Installing
npm i react-native-device-info
npm i react-native-form-progressFor IOS
cd ios
pod installfor people using RN <= 0.59, please read the installation instruction from react-native-device-info repo
Using
import ProgressBar from 'react-native-form-progress'
And then
<ProgressBar
currentProgress={7}
totalNumberOfProgressBars={8}
colorOfProgressBar="#2E7D32"
/>and just keep incrementing current progress
Working GIFS
With blink
Props
| Prop | Type | Default | Required | description |
|---|---|---|---|---|
| hideProgressBar | Boolean | false | No | hides progress bar ( returns auxilary component) |
| colorOfProgressBar | string | 'black' | No | What Color do you want your progress bar to have |
| colorOfNonProgressBar | string | 'white' | No | the space progress bar is yet to take |
| currentProgress | number | none | Yes | the current progress of your progress bar, increment this value on sucessful completion of event |
| totalNumberOfProgressBars | number | none | Yes | Typical this determines how many boxes should progress bar have in all together |
| heightOfProgressBar | number | 5 | No | what should be the height of your progress bar |
| SafeAreaViewDeciderProps | object | See below | No | Takes SafeAreaViewDeciderProps Props as an object |
| blink | boolean | true | No | Do you wan the progress bar to blink or not |
| durationForTheBlink | false | 500 | No | how fast you want the blink to happen |
Props for Safe Area
Pass Safe Area props like this
SafeAreaViewDeciderProps: {
statusBarHiddenForNotch: false,
statusBarHiddenForNonNotch: false,
},Default value for Safe Area are
statusBarHiddenForNotch: false,
statusBarHiddenForNonNotch: false,