https://github.com/interfacekit/react-native-js-stepper
React Native component to display a Stepper, a sequence of logical and numbered steps, frequently used for navigation.
https://github.com/interfacekit/react-native-js-stepper
Last synced: about 1 year ago
JSON representation
React Native component to display a Stepper, a sequence of logical and numbered steps, frequently used for navigation.
- Host: GitHub
- URL: https://github.com/interfacekit/react-native-js-stepper
- Owner: InterfaceKit
- License: mit
- Created: 2018-01-31T11:19:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-23T14:44:24.000Z (almost 8 years ago)
- Last Synced: 2024-04-24T21:22:22.654Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 105 KB
- Stars: 9
- Watchers: 2
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```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).