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-step

Usage

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