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

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

Example

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

Installation

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

or

yarn add react-native-step-indicator

Usage

import StepIndicator from 'react-native-step-indicator';

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'
}


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

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

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

Properties

NameTypeDescriptionDefault
currentPositionNumberCurrent position in steps0
stepCountNumberNumber of steps5
directionStringOrientation(i.e. horizontal,vertical)horizontal
customStylesObjectCustom styling{}
labelsArrayLabels for each stepnull
onPressFunction (position: Number)Function called when a step is pressednull
renderStepIndicatorFunction (position: Number, stepStatus: String)Use this to render custom content inside stepnull
renderLabelFunction (position: Number, stepStatus: String, label: String, currentPosition: Number)Use this to render custom label for each stepnull

Custom Styles

NameTypeDefault
stepIndicatorSizeNumber30
currentStepIndicatorSizeNumber40
separatorStrokeWidthNumber3
separatorStrokeUnfinishedWidthNumber0
separatorStrokeFinishedWidthNumber0
stepStrokeWidthNumber0
currentStepStrokeWidthNumber5
stepStrokeCurrentColorString'#4aae4f'
stepStrokeFinishedColorString'#4aae4f'
stepStrokeUnFinishedColorString'#4aae4f'
separatorFinishedColorString'#4aae4f'
separatorUnFinishedColorString'#a4d4a5'
stepIndicatorFinishedColorString'#4aae4f'
stepIndicatorUnFinishedColorString'#a4d4a5'
stepIndicatorCurrentColorString'#ffffff'
stepIndicatorLabelFontSizeNumber15
currentStepIndicatorLabelFontSizeNumber15
stepIndicatorLabelCurrentColorString'#000000'
stepIndicatorLabelFinishedColorString'#ffffff'
stepIndicatorLabelUnFinishedColorString'rgba(255,255,255,0.5)'
labelColorString'#000000'
currentStepLabelColorString'#4aae4f'
labelSizeNumber13
labelAlignString'center'
labelFontFamilyString

Contributing

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

License

Check it on GitHub