A simple and fully customizable React Native component that implements a progress stepper UI. 

colbymillerdev

react-native-progress-steps

  "description": "A simple and fully customizable React Native component that implements a progress stepper UI.",

    "test": "echo \"Error: no test specified\" && exit 1"

    "url": "git+https://github.com/colbymillerdev/react-native-progress-steps.git"

    "url": "https://github.com/colbymillerdev/react-native-progress-steps/issues"

  "homepage": "https://github.com/colbymillerdev/react-native-progress-steps#readme",

    "metro-react-native-babel-preset": "^0.51.1"

![](https://img.shields.io/npm/v/react-native-progress-steps.svg?style=flat)

![](https://img.shields.io/npm/dt/react-native-progress-steps.svg)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

* Each steps content is displayed inside of a customizable ScrollView. 

* Fully customizable buttons are displayed at the bottom of the component to move between steps.

:-------------------------:|:-------------------------:

![](assets/react-native-progress-steps_1.gif) [examples/ExampleOne.js](examples/ExampleOne.js)| ![](assets/react-native-progress-steps_2.gif) [examples/ExampleTwo.js](examples/ExampleTwo.js)

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

Simply place a `<ProgressStep />` tag for each desired step within the `<ProgressSteps />` wrapper.

                <Text>This is the content within step 1!</Text>

                <Text>This is the content within step 2!</Text>

                <Text>This is the content within step 3!</Text>

Button container and text are fully customizable using the `nextBtnStyle, nextBtnTextStyle, previousBtnStyle, and previousBtnTextStyle` props.

Example usage to change a buttons text color: 

                    <Text>This is the content within step 1!</Text>

                    <Text>This is the content within step 2!</Text>

### Current Step Error and Validation Handling

The `errors` prop should be used if there's a need for validation and error handling when clicking the next button. If you would like to prevent the next step from being rendered, set the `errors` prop to `true`. By default, it will be `false`.

| scrollViewProps | Object to provide props to ScrollView component | {} | Object |

| viewProps | Object to provide props to view component if scrollable is false | {} | Object |

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)

Colby Miller | [https://colbymillerdev.com](https://colbymillerdev.com)

import React, { Component } from 'react';

import { View, ScrollView, TouchableOpacity, Text } from 'react-native';

import ProgressButtons from './ProgressButtons';

    this.props.onNext && (await this.props.onNext());

    // Return out of method before moving to next step if errors exist.

    this.props.setActiveStep(this.props.activeStep + 1);

    // Changes active index and calls previous function passed by parent

    this.props.onPrevious && this.props.onPrevious();

    this.props.setActiveStep(this.props.activeStep - 1);

    this.props.onSubmit && this.props.onSubmit();

    if (this.props.nextBtnDisabled) textStyle.push(disabledBtnText);

        onPress={this.props.activeStep === this.props.stepCount - 1 ? this.onSubmit : this.onNextStep}

        disabled={this.props.nextBtnDisabled}

          {this.props.activeStep === this.props.stepCount - 1 ? this.props.finishBtnText : this.props.nextBtnText}

    if (this.props.previousBtnDisabled) textStyle.push(disabledBtnText);

        <Text style={textStyle}>{this.props.activeStep === 0 ? '' : this.props.previousBtnText}</Text>

    const scrollViewProps = this.props.scrollViewProps || {};

    const viewProps = this.props.viewProps || {};

    const isScrollable = this.props.scrollable;

    const buttonRow = this.props.removeBtnRow ? null : (

        renderNextButton={this.renderNextButton} 

        renderPreviousButton={this.renderPreviousButton} 

        <ScrollView {...scrollViewProps}>{this.props.children}</ScrollView>

          ? <ScrollView {...scrollViewProps}>{this.props.children}</ScrollView>

          : <View {...viewProps}>{this.props.children}</View>}

  previousBtnTextStyle: PropTypes.object,

		{
		"name": "react-native-progress-steps",
		"version": "1.3.2",
		"version": "1.3.3",
		"description": "A simple and fully customizable React Native component that implements a progress stepper UI.",
		@@ -5,0 +5,0 @@ "main": "index.js",

		@@ -91,2 +91,4 @@ import React, { Component } from 'react';
		const scrollViewProps = this.props.scrollViewProps \|\| {};
		const viewProps = this.props.viewProps \|\| {};
		const isScrollable = this.props.scrollable;
		const buttonRow = this.props.removeBtnRow ? null : (
		@@ -101,3 +103,5 @@ <ProgressButtons
		<View style={{ flex: 1 }}>
		<ScrollView {...scrollViewProps}>{this.props.children}</ScrollView>
		{isScrollable
		? <ScrollView {...scrollViewProps}>{this.props.children}</ScrollView>
		: <View {...viewProps}>{this.props.children}</View>}

		@@ -127,4 +131,6 @@ {buttonRow}
		scrollViewProps: PropTypes.object,
		viewProps: PropTypes.object,
		errors: PropTypes.bool,
		removeBtnRow: PropTypes.bool
		removeBtnRow: PropTypes.bool,
		scrollable: PropTypes.bool
		};
		@@ -139,5 +145,6 @@
		errors: false,
		removeBtnRow: false
		removeBtnRow: false,
		scrollable: true
		};

		export default ProgressStep;

New alerts

Fixed alerts

Improved metrics

		@@ -172,2 +172,4 @@ ![](https://img.shields.io/npm/v/react-native-progress-steps.svg?style=flat)
		\| scrollViewProps \| Object to provide props to ScrollView component \| {} \| Object \|
		\| scrollable \| The content of the Progress Step should be scrollable \| true \| Boolean \|
		\| viewProps \| Object to provide props to view component if scrollable is false \| {} \| Object \|
		\| errors \| Used to assist with current step validation. If true, the next step won't be rendered \| false \| Boolean \|
		@@ -174,0 +176,0 @@ \| removeBtnRow \| Used to render the progress step without the button row \| false \| Boolean \|