react-native-js-stepper v0.2.1

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

License

MIT License

Copyright (c) 2018 InterfaceKit

Author

Antonio Moreno Valls <amoreno at apsl.net>

Built with 💛 by APSL.