!progressBar

react-native-progress-bar-multi-step

https://www.npmjs.com/package/react-native-progress-bar-multi-step

Customizable multi step progress bar

Installation

``sh
npm install react-native-progress-bar-multi-step
`

Usage

`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);

progressive={true}
page={page}
setPage={setPage}
tabs={tabs}
/>

`

$3

| 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