react-native-step-indicator

A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.

Features

- Can be used with ViewPager and Listview
- Custom Styling
- Supports vertical and horizontal orientation
- Supports animation between steps

!alt tag                    !alt tag
example/src/HorizontalStepIndicator.tsx      example/src/VerticalStepIndicator.tsx

$3

``sh
$ yarn
$ yarn example ios // For ios
$ yarn example android // For Android
`

$3

npm install react-native-step-indicator-v2 --save

or

yarn add react-native-step-indicator-v2

$3


`javascript
import StepIndicator from 'react-native-step-indicator-v2';

const labels = ["Cart","Delivery Address","Order Summary","Payment Method","Track"];
const customStyles = {
stepIndicatorSize: 25,
currentStepIndicatorSize:30,
separatorStrokeWidth: 2,
currentStepStrokeWidth: 3,
stepStrokeCurrentColor: '#fe7013',
stepStrokeWidth: 3,
stepStrokeFinishedColor: '#fe7013',
stepStrokeUnFinishedColor: '#aaaaaa',
separatorFinishedColor: '#fe7013',
separatorUnFinishedColor: '#aaaaaa',
stepIndicatorFinishedColor: '#fe7013',
stepIndicatorUnFinishedColor: '#ffffff',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 13,
currentStepIndicatorLabelFontSize: 13,
stepIndicatorLabelCurrentColor: '#fe7013',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: '#aaaaaa',
labelColor: '#999999',
labelSize: 13,
currentStepLabelColor: '#fe7013',
borderRadiusSize: 10
}

constructor() {
this.state = {
currentPosition: 0
}
}

render() {
return (
customStyles={customStyles}
currentPosition={this.state.currentPosition}
labels={labels}
/>
)
}

onPageChange(position){
this.setState({currentPosition: position});
}
//...
`

$3

| Name | Type | Description | Default
| ------------ | ------------- | ------------ |------------ |
| currentPosition | Number | Current position in steps | 0
| `stepCount` | Number | Number of steps | 5
| `direction` | String | Orientation(i.e. horizontal,vertical) | horizontal
| `customStyles` | Object | Custom styling | {}
| `labels` | Array | Labels for each step | null
| onPress | Function (position: Number) | Function called when a step is pressed | null
| renderStepIndicator | Function (position: Number, stepStatus: String) | Use this to render custom content inside step | null
| renderLabel | Function (position: Number, stepStatus: String, label: String, currentPosition: Number) | Use this to render custom label for each step | null

$3

| Name | Type | Default
| ------------ | ------------ |------------ |
| `stepIndicatorSize` | Number | 30
| `currentStepIndicatorSize` | Number | 40
| `separatorStrokeWidth` | Number | 3
| `separatorStrokeUnfinishedWidth` | Number | 0
| `separatorStrokeFinishedWidth` | Number | 0
| `stepStrokeWidth` | Number | 0
| `currentStepStrokeWidth` | Number | 5
| `stepStrokeCurrentColor` | String | '#4aae4f'
| `stepStrokeFinishedColor` | String | '#4aae4f'
| `stepStrokeUnFinishedColor` | String | '#4aae4f'
| `separatorFinishedColor` | String | '#4aae4f'
| `separatorUnFinishedColor` | String | '#a4d4a5'
| `stepIndicatorFinishedColor` | String | '#4aae4f'
| `stepIndicatorUnFinishedColor` | String | '#a4d4a5'
| `stepIndicatorCurrentColor` | String | '#ffffff'
| `stepIndicatorLabelFontSize` | Number | 15
| `currentStepIndicatorLabelFontSize` | Number | 15
| `stepIndicatorLabelCurrentColor` | String | '#000000'
| `stepIndicatorLabelFinishedColor` | String | '#ffffff'
| `stepIndicatorLabelUnFinishedColor` | String | 'rgba(255,255,255,0.5)'
| `labelColor` | String | '#000000'
| `currentStepLabelColor` | String | '#4aae4f'
| `labelSize` | Number | 13
| `labelAlign` | String | 'center'
| `labelFontFamily` | String |
| `borderRadiusSize`` | String | 10

$3

If you'd like to see something added or changed to this module please open a new GitHub issue. Pull requests are always welcome.

$3

- Apache-2.0. © Akash Gupta