➧Easy To Use Animated Multi-step Form For React Native Apps • Softbranchdevelopers

Contents

Description:

react-native-animated-multistep is a library that will give you the flexibility to create animated multi-step forms for React Native applications. And the good thing is, its easy to integrate in your project.

How to use it?

Install the library using NPM or Yarn.

#npm
npm install react-native-animated-multistep

#Yarn
yarn add react-native-animated-multistep

2. In the top level component, add following.

import AnimatedMultistep from “react-native-animated-multistep”;

/* Define the steps */

import Step1 from “./steps/step1”;
import Step2 from “./steps/step2”;
import Step3 from “./steps/step3”;
import Step4 from “./steps/step4”;

const allSteps = [
{ name: “step 1”, component: Step1 },
{ name: “step 2”, component: Step2 },
{ name: “step 3”, component: Step3 },
{ name: “step 4”, component: Step4 }
];

/* Define your class */
export default class App extends Component {
/* define the method to be called when you go on next step */

onNext = () => {
console.log(“Next”);
};

/* define the method to be called when you go on back step */

onBack = () => {
console.log(“Back”);
};

/* define the method to be called when the wizard is finished */

finish = finalState => {
console.log(finalState);
};

/* render MultiStep */
render() {
return (
<View style={{ flex: 1 }}>
<AnimatedMultistep
steps={allSteps}
onFinish={this.finish}
onBack={this.onBack}
onNext={this.onNext}
comeInOnNext=”bounceInUp”
OutOnNext=”bounceOutDown”
comeInOnBack=”bounceInDown”
OutOnBack=”bounceOutUp”
/>
</View>
);
}
}

3. And, in the step, add following.

import React, { Component } from “react”;
import { Image, View, TouchableOpacity, TextInput, Text } from “react-native”;

import styles from “./styles”;

class step1 extends Component {
constructor(props) {
super(props);
this.state = {
totalSteps: “”,
currentStep: “”
};
}

static getDerivedStateFromProps = props => {
const { getTotalSteps, getCurrentStep } = props;
return {
totalSteps: getTotalSteps(),
currentStep: getCurrentStep()
};
};

nextStep = () => {
const { next, saveState } = this.props;
// Save state for use in other steps
saveState({ name: “samad” });

// Go to next step
next();
};

goBack() {
const { back } = this.props;
// Go to previous step
back();
}

render() {
const { currentStep, totalSteps } = this.state;
return (
<View style={[styles.container, styles.step1]}>
<View>
<Text
style={styles.currentStepText}
>{`Step ${currentStep} of ${totalSteps}`}</Text>
</View>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ text })}
value={this.state.text}
placeholder={“First Name”}
placeholderTextColor=”#fff”
/>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ text })}
value={this.state.text}
placeholder={“Last Name”}
placeholderTextColor=”#fff”
/>
<View style={styles.btnContainer}>
<TouchableOpacity onPress={this.nextStep} style={styles.btnStyle}>
<Image
source={require(“../assets/icons/arrow.png”)}
style={styles.btnImage}
resizeMode=”cover”
/>
</TouchableOpacity>
</View>
</View>
);
}
}