0.2.5 • Published 3 years ago
react-native-progress-bar-multi-step v0.2.5
react-native-progress-bar-multi-step
https://www.npmjs.com/package/react-native-progress-bar-multi-step
Customizable multi step progress bar
Installation
npm install react-native-progress-bar-multi-stepUsage
import ProgressBarMultiStep from "react-native-progress-bar-multi-step";
// ...
const tabs = [
{
title: 'Personal',
pageNo: 1
// onPress: e => console.log(e)
},
{title: 'Address', pageNo: 2},
{title: 'Payment', pageNo: 3}
];
Keys must be same with the example of tab array. onPress is a callback function which has parameter of selected pageNo.
const [page, setPage] = useState(1);
<ProgressBarMultiStep
progressive={true}
page={page}
setPage={setPage}
tabs={tabs}
/>Properties
| Prop | Description | Default | Type | Required |
|---|---|---|---|---|
page | Current page number. | 1 | number | yes |
setPage | Function to set state | function | no | |
tabs | array of tabs object that has properties of title | array | Tab | yes |
progressive | if progressive is set to false only current page tab color will be active | true | boolean | no |
finishedBackgroundColor | Background color of the finished steps and line. | 'rgb(57,202,116)' | string | no |
inProgressBackgroundColor | Background color of the in progress steps and line. | 'rgb(58,153,216)' | string | no |
circleStyle | Object of width and height keys to style step circle | width:56, height:56 | object | no |
stepNumberStyle | Object of fontSize, fontWeight and color keys | default:color:'white',fontWeight:'bold',fontSize: 22 | object | no |
stepTitleStyle | Object of fontSize and fontWeight keys | default: fontWeight: 'bold', fontSize: 22. | object | no |
lineStyle | Object of width, height and marginHorizontal keys | default:height: 3,width: 60,marginHorizontal: 10 | object | no |
containerStyle | Object of width, height and marginTop keys | default:height: '10%',width: '100%',marginHorizontal: 10 | object | no |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT