Needlessly Promiscuous, Modularize!
    Have ideas to improve npm?Join in the discussion! »

    @canner/react-native-step-indicator
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    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
    • This fork add settings for label positions. In vertical orientation you can set your label in left or right, in horizontal you can set eithor top or bottom

    alt tag                    alt tag example/HorizontalStepIndicatorExample.js      example/VerticalStepIndicatorExample.js

    Example

    cd example
    $ npm i
    $ react-native run-ios   // For ios
    $ react-native run-android   // For Android

    Installation

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

    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
    labelPosition String Label Position(i.e. horizontal(top, bottom),vertical (left, right)) horizontal(bottom), vertical(right)
    customStyles Object Custom styling {}
    labels Array Labels for each step null
    onPress Function (position: Number) Function called when a step is pressed null

    Custom Styles

    Name Type Default
    stepIndicatorSize Number 30
    currentStepIndicatorSize Number 40
    separatorStrokeWidth Number 3
    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

    Animation

    Name Type Default
    processDuration Number 1000
    radiusDuration Number 500
    sizeDuration Number 500

    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.

    Develop

    use yarn instead of npm

    License

    Install

    npm i @canner/react-native-step-indicator

    DownloadsWeekly Downloads

    0

    Version

    0.2.0

    License

    Apache 2.0

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar