1.0.11 • Published 4 years ago
react-native-form-prorgress v1.0.11
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
Developer of this repo looking for full time interesting oppertunities, connect on linkedin
Installing
npm i react-native-device-info
npm i react-native-form-prorgressFor 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-prorgress
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,