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 */ type Props = {} Component<Props> { return <Stepper ref= { thisstepper = ref } validation=false activeDotStyle=stylesactiveDot inactiveDotStyle=stylesinactiveDot showTopStepper=true showBottomStepper=true steps='Step 1' 'Step 2' backButtonTitle="BACK" nextButtonTitle="NEXT" activeStepStyle=stylesactiveStep inactiveStepStyle=stylesinactiveStep activeStepTitleStyle=stylesactiveStepTitle inactiveStepTitleStyle=stylesinactiveStepTitle activeStepNumberStyle=stylesactiveStepNumber inactiveStepNumberStyle=stylesinactiveStepNumber> <View /> <View /> </Stepper> } const styles = StyleSheet
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.