# 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

Stepper

## Getting started ```sh $ yarn add react-native-js-stepper ``` ## Usage ```js /* @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 { render() { return ( { 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}> ) } } 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 `` Built with 💛 by [APSL](https://github.com/apsl).

	Stars	Issues	Version	Updated	Created
react-native-js-stepper			0.2.1	6 years ago	6 years ago
react-native-step-indicator	1,398	84	1.0.3	4 years ago	7 years ago
react-native-stepper			0.0.2	7 years ago	7 years ago

react-native-js-stepper vs react-native-step-indicator vs react-native-stepper

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past