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>
   );
 }
}

src/example/index.js

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