A react native component super useful in displaying progress when user is filling up forms like signup page, setting, information catering etc
npm i react-native-device-info
npm i react-native-form-progress
cd ios
pod install
for people using RN <= 0.59, please read the installation instruction from react-native-device-info
repo
import ProgressBar from react-native-form-prorgress
And then
<ProgressBar
defaultProgress={7}
totalNumberOfProgressBars={8}
colorOfProgressBar="#2E7D32"
/>
and just keep incrementing current progress
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 |
defaultProgress | 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 |
Pass Safe Area props like this
SafeAreaViewDeciderProps: {
statusBarHiddenForNotch: false,
statusBarHiddenForNonNotch: false,
},
Default value for Safe Area are
statusBarHiddenForNotch: false,
statusBarHiddenForNonNotch: false,
Author: blendtale
Source Code: https://github.com/blendtale/react-native-form-progress
#react-native #react #mobile-apps