customizable multi step progress bar
npm install react-native-progress-bar-multi-stepCustomizable multi step progress bar
``sh`
npm install react-native-progress-bar-multi-step
`js
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);
page={page}
setPage={setPage}
tabs={tabs}
/>
`
| Prop | Description | Default | Type | Required
| ------------------------------------ | ---------------------------------------------------------------------------- | --------------------|------- |-----------
| page | Current page number. | 1 | number | yessetPage
| | Function to set state | | function | notabs
| | 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 | noinProgressBackgroundColor
| | Background color of the in progress steps and line. | 'rgb(58,153,216)' | string | nocircleStyle
| | Object of width and height keys to style step circle | width:56, height:56 | object | nostepNumberStyle
| | Object of fontSize, fontWeight and color keys |default:color:'white',fontWeight:'bold',fontSize: 22| object | nostepTitleStyle
| | Object of fontSize and fontWeight keys | default: fontWeight: 'bold', fontSize: 22. | object | nolineStyle
| | Object of width, height and marginHorizontal keys |default:height: 3,width: 60,marginHorizontal: 10| object | nocontainerStyle` | Object of width, height and marginTop keys|default:height: '10%',width: '100%',marginHorizontal: 10| object | no
|
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT