@dvinfosys/react-native-step-indicator v1.0.2

@dvinfosys/react-native-step-indicator

A simple react-native order processing components.

Installation

npm install @dvinfosys/react-native-step-indicator --save

or

yarn add @dvinfosys/react-native-step-indicator

Usage

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

const labels = [
  {
    title: "Cart",
    desc: "Your Order placed.",
    time: '',
    driver: false,
  },
  {
    title: "Delivery Address",
    desc: "Anything",
    time: '',
    driver: false,
  },
  {
    title: "Order Summary",
    desc: "Anything",
    time: '',
    driver: false,
  },
  {
    title: "Payment Method",
    desc: "Anything",
    time: '',
    driver: true,
  },
  {
    title: "Track",
    desc: "Anything",
    time: '',
    driver: false,
  }];

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

Custom Styles

License

• Apache-2.0. © DV Infosys