react-native-js-stepper

React Native component to display a Stepper, a sequence of logical and numbered steps, frequently used for navigation.

See more on:

https://material.io/guidelines/components/steppers.html

Getting started

$ yarn add react-native-js-stepper

Usage

/* @flow */

import React from 'react'
import { StyleSheet } from 'react-native'
import Stepper from 'react-native-js-stepper'

type Props = {}

export default class ViewScreen extends React.Component<Props> {
  render() {
    return (
      <Stepper
        ref={(ref: any) => {
          this.stepper = ref
        }}
        validation={false}
        activeDotStyle={styles.activeDot}
        inactiveDotStyle={styles.inactiveDot}
        showTopStepper={true}
        showBottomStepper={true}
        steps={['Step 1', 'Step 2']}
        backButtonTitle="BACK"
        nextButtonTitle="NEXT"
        activeStepStyle={styles.activeStep}
        inactiveStepStyle={styles.inactiveStep}
        activeStepTitleStyle={styles.activeStepTitle}
        inactiveStepTitleStyle={styles.inactiveStepTitle}
        activeStepNumberStyle={styles.activeStepNumber}
        inactiveStepNumberStyle={styles.inactiveStepNumber}>
        <View />
        <View />
      </Stepper>
    )
  }
}

const styles = StyleSheet.create({
  activeDot: {
    backgroundColor: 'grey'
  },
  inactiveDot: {
    backgroundColor: '#ededed'
  },
  activeStep: {
    backgroundColor: 'grey'
  },
  inactiveStep: {
    backgroundColor: '#ededed'
  },
  activeStepTitle: {
    fontWeight: 'bold'
  },
  inactiveStepTitle: {
    fontWeight: 'normal'
  },
  activeStepNumber: {
    color: 'white'
  },
  inactiveStepNumber: {
    color: 'black'
  }
})

API

| Props | Type | Description | Required | | :---------------------: | :-----------: | :------------------------------------------------------------------: | :------: | | initialPage | number | Index of initial page that should be selected | No | | onPressNext | Function | Function executed when Next button is pressed at the bottom | No | | onPressBack | Function | Function executed when Back button is pressed at the bottom | No | | onScrollPage | Function | Function executed when page is changed by scroll event | No | | textButtonStyle | Object | Text styles of the Back and Next buttons at the bottom | No | | backButtonTitle | string | Title of the Back button | No | | nextButtonTitle | string | Title of the Next button | No | | topStepperStyle | Object | Styles of the top stepper | No | | showTopStepper | boolean | If true shows the top stepper | No | | activeDotStyle | Object | Styles object of active dot at the bottom | No | | inactiveDotStyle | Object | Styles object of inactive dot at the bottom | No | | steps | Array | Array of strings that contains title of each step on the top stepper | No | | stepsTitleStyle | Object | Styles object for title of each step at top | No | | showBottomStepper | boolean | If true shows bottom stepper | No | | activeStepNumberStyle | Object | Styles object of number on active step | No | | inactiveStepNumberStyle | Object | Styles object of number on inactive step | No | | activeStepTitleStyle | Object | Styles object of title on active step | No | | inactiveStepTitleStyle | Object | Styles object of title on inactive step | No | | validation | boolean | Disables validation (related to top stepper numbers) | No | | | | | |

License

MIT License

Copyright (c) 2018 InterfaceKit

Author

Antonio Moreno Valls <amoreno at apsl.net>

Built with 💛 by APSL.