Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-progress-steps with all npm packages installed. Try it out:

var reactNativeProgressSteps = require("react-native-progress-steps")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-progress-steps v1.2.8

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

PRs Welcome

react-native-progress-steps

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

  • 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.
Example OneExample Two
examples/ExampleOne.js examples/ExampleTwo.js

Installation

If using yarn:

yarn add react-native-progress-steps

If using npm:

npm i react-native-progress-steps

Usage

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

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

<View style={{flex: 1}}>
    <ProgressSteps>
        <ProgressStep label="First Step">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 1!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Second Step">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 2!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Third Step">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 3!</Text>
            </View>
        </ProgressStep>
    </ProgressSteps>
</View>

Button Styling Usage

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

Example usage to change a buttons text color:

const buttonTextStyle = {
    color: '#393939'
};

return (
    <View style={{flex: 1}}>
        <ProgressSteps>
            <ProgressStep label="First Step" nextBtnTextStyle={buttonTextStyle} previousBtnTextStyle={buttonTextStyle}>
                <View style={{ alignItems: 'center' }}>
                    <Text>This is the content within step 1!</Text>
                </View>
            </ProgressStep>
            <ProgressStep label="Second Step" nextBtnTextStyle={buttonTextStyle} previousBtnTextStyle={buttonTextStyle}>
                <View style={{ alignItems: 'center' }}>
                    <Text>This is the content within step 2!</Text>
                </View>
            </ProgressStep>
        </ProgressSteps>
    </View>
)

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.

Example usage of validation check:

state = {
    isValid: false,
    errors: false
};

onNextStep = () => {
    if (!this.state.isValid) {
      this.setState({ errors: true });
    } else {
      this.setState({ errors: false });
    }
};

render() {
    return (
      <View style={{ flex: 1 }}>
        <ProgressSteps>
          <ProgressStep label="First Step" onNext={this.onNextStep} errors={this.state.errors}>
            <View style={{ alignItems: 'center' }}>
              <Text>This is the content within step 1!</Text>
            </View>
          </ProgressStep>
          <ProgressStep label="Second Step">
            <View style={{ alignItems: 'center' }}>
              <Text>This is the content within step 2!</Text>
            </View>
          </ProgressStep>
        </ProgressSteps>
      </View>
    );
}

Documentation

Progress Steps Component

NameDescriptionDefaultType
borderWidthWidth of the progress bar between steps6Number
borderStyleType of border for the progress barsolidString
activeStepIconBorderColorOutside border color for the active step#4bb543String
progressBarColorColor of the default progress bar#ebebe4String
completedProgressBarColorColor of the completed progress bar#4bb543String
activeStepIconColorColor of the active step icontransparentString
completedStepIconColorColor of the completed step icon#4bb543String
disabledStepIconColorColor of the disabled step icon#ebebe4String
labelFontFamilyFont family for the step icon labeliOS/Android default fontString
labelColorColor of the default labellightgrayString
activeLabelColorColor of the active label#4bb543String
activeStepNumColorColor of the active step numberblackString
completedStepNumColorColor of the completed step numberblackString
disabledStepNumColorColor of the disabled step numberwhiteString
completedCheckColorColor of the completed step checkmarkwhiteString
activeStepManually specify the active step0Number

Progress Step Component

NameDescriptionDefaultType
labelTitle of the current step to be displayednullString
onNextFunction called when the next step button is pressednullFunc
onPreviousFunction called when the previous step button is pressednullFunc
onSubmitFunction called when the submit step button is pressednullFunc
nextBtnTextText to display inside the next buttonNextString
previousBtnTextText to display inside the previous buttonPreviousString
finishBtnTextText to display inside the button on the last stepSubmitString
nextBtnStyleStyle object to provide to the next/finish buttons{ textAlign: 'center', padding: 8 }Object
nextBtnTextStyleStyle object to provide to the next/finish button text{ color: '#007aff', fontSize: 18 }Object
nextBtnDisabledValue to disable/enable next buttonfalseBoolean
previousBtnStyleStyle object to provide to the previous button{ textAlign: 'center', padding: 8 }Object
previousBtnTextStyleStyle object to provide to the previous button text{ color: '#007aff', fontSize: 18 }Object
previousBtnDisabledValue to disable/enable previous buttonfalseBoolean
scrollViewPropsObject to provide props to ScrollView component{}Object
errorsUsed to assist with current step validation. If true, the next step won't be renderedfalseBoolean

Contributing

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

Author

Colby Miller | https://colbymillerdev.com

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free