React Native Animated Multistep

Preview

installation

You can install this package with the following command:

yarn add react-native-animated-multistep

or

npm install react-native-animated-multistep

How to use

you can also see this example

In the top level component add

1import AnimatedMultistep from "react-native-animated-multistep";
2import StepOne from "./StepOne";
3import StepTwo from "./StepTwo";
4import StepThree from "./StepThree";
5
6/* Define the steps  */
7
8import Step1 from "./steps/step1";
9import Step2 from "./steps/step2";
10import Step3 from "./steps/step3";
11import Step4 from "./steps/step4";
12
13const allSteps = [
14  { name: "step 1", component: Step1 },
15  { name: "step 2", component: Step2 },
16  { name: "step 3", component: Step3 },
17  { name: "step 4", component: Step4 }
18];
19
20/* Define your class */
21export default class App extends Component {
22  /* define the method to be called when you go on next step */
23
24  onNext = () => {
25    console.log("Next");
26  };
27
28  /* define the method to be called when you go on back step */
29
30  onBack = () => {
31    console.log("Back");
32  };
33
34  /* define the method to be called when the wizard is finished */
35
36  finish = finalState => {
37    console.log(finalState);
38  };
39
40  /* render MultiStep */
41  render() {
42    return (
43      <View style={{ flex: 1 }}>
44        <AnimatedMultistep
45          steps={allSteps}
46          onFinish={this.finish}
47          onBack={this.onBack}
48          onNext={this.onNext}
49          comeInOnNext="bounceInUp"
50          OutOnNext="bounceOutDown"
51          comeInOnBack="bounceInDown"
52          OutOnBack="bounceOutUp"
53        />
54      </View>
55    );
56  }
57}

In the step

1import React, { Component } from "react";
2import { Image, View, TouchableOpacity, TextInput, Text } from "react-native";
3
4import styles from "./styles";
5
6class step1 extends Component {
7  constructor(props) {
8    super(props);
9    this.state = {
10      totalSteps: "",
11      currentStep: ""
12    };
13  }
14
15  static getDerivedStateFromProps = props => {
16    const { getTotalSteps, getCurrentStep } = props;
17    return {
18      totalSteps: getTotalSteps(),
19      currentStep: getCurrentStep()
20    };
21  };
22
23  nextStep = () => {
24    const { next, saveState } = this.props;
25    // Save state for use in other steps
26    saveState({ name: "samad" });
27
28    // Go to next step
29    next();
30  };
31
32  goBack() {
33    const { back } = this.props;
34    // Go to previous step
35    back();
36  }
37
38  render() {
39    const { currentStep, totalSteps } = this.state;
40    return (
41      <View style={[styles.container, styles.step1]}>
42        <View>
43          <Text
44            style={styles.currentStepText}
45          >{`Step ${currentStep} of ${totalSteps}`}</Text>
46        </View>
47        <TextInput
48          style={styles.input}
49          onChangeText={text => this.setState({ text })}
50          value={this.state.text}
51          placeholder={"First Name"}
52          placeholderTextColor="#fff"
53        />
54        <TextInput
55          style={styles.input}
56          onChangeText={text => this.setState({ text })}
57          value={this.state.text}
58          placeholder={"Last Name"}
59          placeholderTextColor="#fff"
60        />
61        <View style={styles.btnContainer}>
62          <TouchableOpacity onPress={this.nextStep} style={styles.btnStyle}>
63            <Image
64              source={require("../assets/icons/arrow.png")}
65              style={styles.btnImage}
66              resizeMode="cover"
67            />
68          </TouchableOpacity>
69        </View>
70      </View>
71    );
72  }
73}
74
75export default step1;

API

this.props.saveState({ key: value, key2: value2})

Use this method to save state

this.props.getState()

Use this method to get all the values saved with saveState so far. Retuns an object

this.props.next()

Use this method to go to next step in the app.

this.props.back()

Use this method to go to previos step in the app.

this.props.getCurrentStep()

Use this method to get current step.

this.props.getTotalSteps()

Use this method to get total steps.

Props

Props	Type	Notes	Required
steps	Array	array containing steps	✔️
onFinish	function	a function, which will run when all steps are finish	❌
onNext	function	a function, which will run when you go on next step	❌
onBack	function	a function, which will run when you go on back step	❌
comeInOnNext	String	define you animation type when the component comes in on next, default is fadeInLeft	❌
OutOnNext	String	define you animation type when the component goes out on next, default is fadeOutRight	❌
comeInOnBack	String	define you animation type when the component comes in on back, default is fadeInRight	❌
OutOnBack	String	define you animation type when the component goes out on next, default is fadeOutLeft	❌
duration	number	define you animation duration duration	❌

Note:

you can add more animation and set-up animations by your own, check react-native-animatable for aminations.

Methods

Method Name	Arguments	Notes
next()	none	use this method to jump on next step
back()	none	use this method to go back on previous step
saveState()	Object	use this method to save your state, in order to get in other steps
getState()	none	use this method to get you saved state by saveState() method
getCurrentStep()	none	use this method to get current step
getTotalSteps()	none	use this method to get total steps