PROGRESS STEPS IN REACT NATIVE

Share the post

Hello All, In the last topic, We discussed How to show a chart using a react-native using chart kit library which explains react native chart kit with the help of an example. In this topic, We will discuss How to add progress steps in react native. Here, We are going to use react-native-progress-steps component which helps us to implement the progress steps in react native. Before we start make sure that you have installed all software & dependencies. Please follow the below steps to implement it.

Steps to Implement progress steps

1. Create a new page in your react native project.

2. Install the dependency of library as shown below

npm i react-native-progress-steps

3. Import the necessary classes as shown below

import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';

4. Write below code to show the progress step UI.

<View style={styles.container}>
                <ProgressSteps>
                    <ProgressStep label="STEP 1" onNext={this.nextBtnPress} >
                        <View >
                            <Text style={styles.txt}>
                                STEP 1
                            </Text>
                        </View>
                    </ProgressStep>
                    <ProgressStep label="STEP 2" onNext={this.nextBtnPress} onPrevious={this.prevBtnPress}>
                        <View >
                            <Text style={styles.txt}>
                                STEP 2
                            </Text>
                        </View>
                    </ProgressStep>
                    <ProgressStep label="STEP 3" onNext={this.nextBtnPress} onPrevious={this.prevBtnPress} onSubmit={this.submitBtnPress}>
                        <View >
                            <Text style={styles.txt}>
                                STEP 3
                            </Text>
                        </View>
                    </ProgressStep>
                </ProgressSteps>
            </View>

Here, We have included three progress step under ProgressSteps. Using some functions we can able to handle the Next button click, Previous button click & Submit button click. In above example, We have handled all this click events. The code to handle the Next button click is as shown below:

 nextBtnPress = () => {
        console.log("NEXT");
        this.setState({ isNextPressed: true });
    }

The code to handle the Previous button click is as shown below :

 prevBtnPress = () => {
        console.log("PREV");
        this.setState({ isPreviousPressed: true });
    }

& finally we will handle the submit button click as shown below

submitBtnPress = () => {
        console.log("SUBMIT");
        this.setState({ isSubmitPressed: true });
    }

In this click events, You can able to handle your own logic. Here, We simply console the log & changing the state of Boolean value.

5. The full source code is as shown below

import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';
import React, { Component, useState } from 'react';
import { StyleSheet, Text, View, Dimensions, ScrollView } from 'react-native';
import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';


export default class HomePage extends Component {


    state = {
        isNextPressed: false,
        isPreviousPressed: false,
        isSubmitPressed: false
    }


    componentDidMount = () => {
    }

    nextBtnPress = () => {
        console.log("NEXT");
        this.setState({ isNextPressed: true });
    }

    prevBtnPress = () => {
        console.log("PREV");
        this.setState({ isPreviousPressed: true });
    }

    submitBtnPress = () => {
        console.log("SUBMIT");
        this.setState({ isSubmitPressed: true });
    }


    render() {

        return (

            <View style={styles.container}>
                <ProgressSteps>
                    <ProgressStep label="STEP 1" onNext={this.nextBtnPress} >
                        <View >
                            <Text style={styles.txt}>
                                STEP 1
                            </Text>
                        </View>
                    </ProgressStep>
                    <ProgressStep label="STEP 2" onNext={this.nextBtnPress} onPrevious={this.prevBtnPress}>
                        <View >
                            <Text style={styles.txt}>
                                STEP 2
                            </Text>
                        </View>
                    </ProgressStep>
                    <ProgressStep label="STEP 3" onNext={this.nextBtnPress} onPrevious={this.prevBtnPress} onSubmit={this.submitBtnPress}>
                        <View >
                            <Text style={styles.txt}>
                                STEP 3
                            </Text>
                        </View>
                    </ProgressStep>
                </ProgressSteps>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 10,
        height: 500
    },
    txt: {
        fontSize: 18,
        textAlign: 'center',
        padding: 15
    }
})

The output for above code is as follows

This is how we can able to implement the progress stepper in react native.

Must Read :

1 thought on “PROGRESS STEPS IN REACT NATIVE”

Leave a Comment