Skip to content

24ark/react-native-step-indicator

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

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

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

Custom Styles

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

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