react-native-progress-stepper

react-native-progress-stepper

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

Installation

If using yarn:

yarn add react-native-progress-stepper

If using npm:

npm i react-native-progress-stepper

Usage

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

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>
)

With typescript

import React from 'react';
import { View, Text, ScrollViewProps } from 'react-native';
import { ProgressSteps, ProgressStep } from 'react-native-progress-stepper';

const ExampleOne = () => {
  const defaultScrollViewProps: ScrollViewProps = {
    keyboardShouldPersistTaps: 'handled',
    contentContainerStyle: {
      flex: 1,
      justifyContent: 'center',
    },
  };

  const onNextStep = () => {
    console.log('called next step');
  };

  const onPaymentStepComplete = () => {
    alert('Payment step completed!');
  };

  const onPrevStep = () => {
    console.log('called previous step');
  };

  const onSubmitSteps = () => {
    console.log('called on submit step.');
  };

  return (
    <View style={{ flex: 1, marginTop: 50 }}>
      <ProgressSteps>
        <ProgressStep
          label="Payment"
          onNext={onPaymentStepComplete}
          onPrevious={onPrevStep}
          scrollViewProps={defaultScrollViewProps}
        >
          <View style={{ alignItems: 'center' }}>
            <Text>Payment step content</Text>
          </View>
        </ProgressStep>
        <ProgressStep
          label="Shipping Address"
          onNext={onNextStep}
          onPrevious={onPrevStep}
          scrollViewProps={defaultScrollViewProps}
        >
          <View style={{ alignItems: 'center' }}>
            <Text>Shipping address step content</Text>
          </View>
        </ProgressStep>
        <ProgressStep
          label="Billing Address"
          onNext={onNextStep}
          onPrevious={onPrevStep}
          scrollViewProps={defaultScrollViewProps}
        >
          <View style={{ alignItems: 'center' }}>
            <Text>Billing address step content</Text>
          </View>
        </ProgressStep>
        <ProgressStep
          label="Confirm Order"
          onPrevious={onPrevStep}
          onSubmit={onSubmitSteps}
          scrollViewProps={defaultScrollViewProps}
        >
          <View style={{ alignItems: 'center' }}>
            <Text>Confirm order step content</Text>
          </View>
        </ProgressStep>
      </ProgressSteps>
    </View>
  );
};

export default ExampleOne;

import React from 'react';
import { View, Text, ScrollViewProps, ViewStyle, TextStyle } from 'react-native';
import { ProgressSteps, ProgressStep } from 'react-native-progress-stepper';

const ExampleTwo = () => {
  const defaultScrollViewProps: ScrollViewProps = {
    keyboardShouldPersistTaps: 'handled',
    contentContainerStyle: {
      flex: 1,
      justifyContent: 'center'
    }
  };

  const onNextStep = () => {
    console.log('called next step');
  };

  const onPrevStep = () => {
    console.log('called previous step');
  };

  const onSubmitSteps = () => {
    console.log('called on submit step.');
  };

  const progressStepsStyle = {
    activeStepIconBorderColor: '#686868',
    activeLabelColor: '#686868',
    activeStepNumColor: 'white',
    activeStepIconColor: '#686868',
    completedStepIconColor: '#686868',
    completedProgressBarColor: '#686868',
    completedCheckColor: '#4bb543'
  };

  const buttonTextStyle: ViewStyle | TextStyle = {
    color: '#686868',
    fontWeight: 'bold'
  };

  return (
    <View style={{ flex: 1, marginTop: 50 }}>
      <ProgressSteps {...progressStepsStyle}>
        <ProgressStep
          label="First"
          onNext={onNextStep}
          onPrevious={onPrevStep}
          scrollViewProps={defaultScrollViewProps}
          nextBtnTextStyle={buttonTextStyle}
          previousBtnTextStyle={buttonTextStyle}
        >
          <View style={{ alignItems: 'center' }}>
            <Text>This is the content within step 1!</Text>
          </View>
        </ProgressStep>
        <ProgressStep
          label="Second"
          onNext={onNextStep}
          onPrevious={onPrevStep}
          scrollViewProps={defaultScrollViewProps}
          nextBtnTextStyle={buttonTextStyle}
          previousBtnTextStyle={buttonTextStyle}
        >
          <View style={{ alignItems: 'center' }}>
            <Text>This is the content within step 2!</Text>
          </View>
        </ProgressStep>
        <ProgressStep
          label="Third"
          onNext={onNextStep}
          onPrevious={onPrevStep}
          scrollViewProps={defaultScrollViewProps}
          nextBtnTextStyle={buttonTextStyle}
          previousBtnTextStyle={buttonTextStyle}
        >
          <View style={{ alignItems: 'center' }}>
            <Text>This is the content within step 3!</Text>
          </View>
        </ProgressStep>
        <ProgressStep
          label="Fourth"
          onNext={onNextStep}
          onPrevious={onPrevStep}
          scrollViewProps={defaultScrollViewProps}
          nextBtnTextStyle={buttonTextStyle}
          previousBtnTextStyle={buttonTextStyle}
        >
          <View style={{ alignItems: 'center' }}>
            <Text>This is the content within step 4!</Text>
          </View>
        </ProgressStep>
        <ProgressStep
          label="Fifth"
          onPrevious={onPrevStep}
          onSubmit={onSubmitSteps}
          scrollViewProps={defaultScrollViewProps}
          nextBtnTextStyle={buttonTextStyle}
          previousBtnTextStyle={buttonTextStyle}
        >
          <View style={{ alignItems: 'center' }}>
            <Text>This is the content within step 5!</Text>
          </View>
        </ProgressStep>
      </ProgressSteps>
    </View>
  );
};

export default ExampleTwo;

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:

const [isValid, setIsValid] = useState(false);
const [errors, setErrors] = useState(false);

const onNextStep = () => {
    if (!isValid) {
        setErrors(true);
    } else {
        setErrors(false);
    }
};

return (
    <View style={{ flex: 1 }}>
        <ProgressSteps>
        <ProgressStep label="First Step" onNext={onNextStep} errors={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

Name	Description	Default	Type
borderWidth	Width of the progress bar between steps	6	Number
borderStyle	Type of border for the progress bar	solid	String
activeStepIconBorderColor	Outside border color for the active step	#4bb543	String
progressBarColor	Color of the default progress bar	#ebebe4	String
completedProgressBarColor	Color of the completed progress bar	#4bb543	String
activeStepIconColor	Color of the active step icon	transparent	String
completedStepIconColor	Color of the completed step icon	#4bb543	String
disabledStepIconColor	Color of the disabled step icon	#ebebe4	String
labelFontFamily	Font family for the step icon label	iOS/Android default font	String
labelColor	Color of the default label	lightgray	String
labelFontSize	Font size for the step icon label	14	Number
activeLabelColor	Color of the active label	#4bb543	String
activeLabelFontSize	Optional font size for the active step icon label	null	Number
completedLabelColor	Color of the completed label	lightgray	String
activeStepNumColor	Color of the active step number	black	String
completedStepNumColor	Color of the completed step number	black	String
disabledStepNumColor	Color of the disabled step number	white	String
completedCheckColor	Color of the completed step checkmark	white	String
activeStep	Manually specify the active step	0	Number
isComplete	Set all Steps to active state	false	Boolean
topOffset	Set progress bar top offset	30	Number
marginBottom	Set progress bar bottom margin	50	Number

Progress Step Component

Name	Description	Default	Type
label	Title of the current step to be displayed	null	String
onNext	Function called when the next step button is pressed	null	Func
onPrevious	Function called when the previous step button is pressed	null	Func
onSubmit	Function called when the submit step button is pressed	null	Func
nextBtnText	Text to display inside the next button	Next	String
previousBtnText	Text to display inside the previous button	Previous	String
finishBtnText	Text to display inside the button on the last step	Submit	String
nextBtnStyle	Style object to provide to the next/finish buttons	{ textAlign: 'center', padding: 8 }	Object
nextBtnTextStyle	Style object to provide to the next/finish button text	{ color: '#007aff', fontSize: 18 }	Object
nextBtnDisabled	Value to disable/enable next button	false	Boolean
previousBtnStyle	Style object to provide to the previous button	{ textAlign: 'center', padding: 8 }	Object
previousBtnTextStyle	Style object to provide to the previous button text	{ color: '#007aff', fontSize: 18 }	Object
previousBtnDisabled	Value to disable/enable previous button	false	Boolean
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
removeBtnRow	Used to render the progress step without the button row	false	Boolean

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

Fernand Ouedraogo | my linkedin

License

MIT