0.0.2 • Published 4 years ago
react-native-steps-wizard v0.0.2
react-native-steps-wizard
A react-native implementation of steps bar wizard indicator
Installation
npm i react-native-steps-wizard
Usage
class Example extends Component {
routes = [
{
'Shipping': () => <ExampleComponent message="Test #1" />,
'nextAction': () => this.doSomething('hello world!'),
'previousAction': () => this.doSomething('back to previous view #1')
},
{
'Payment': () => <ExampleComponent message="Test #2" />,
'nextAction': () => this.doSomething('hello world #2!'),
'previousAction': () => this.doSomething('back to previous view #2')
},
{
'Confirm': () => <ExampleComponent message="Test #3" />,
'nextAction': () => this.doSomething('hello world #3!'),
'previousAction': () => this.doSomething('back to previous view #3')
}
];
customStyle = {/*Here your styles properties */}
doSomething(text = 'do something...') {
console.log(text);
}
render() {
return (
<View>
<Steps stepsStyle={customStyle}
steps={this.routes} />
</View>
);
}
}
Properties
Name | Type | Description |
---|---|---|
stepsTitles | Array | List all steps to be shown |
stepsStyle | Object | Custom styling |
Styles Properties
Name | Type | Default |
---|---|---|
labelColor | String | #FFFFFF |
stepsBackgroundColor | String | #2E81D3 |
stepsBorderColor | String | #2E81D3 |
currentStepBorderColor | String | #2E81D3 |
currentStepBackgroundColor | String | #FFFFFF |
currentStepLabelColor | String | #2E81D3 |