react-native-progress-steps v2.0.3

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.
• Customizable buttons are displayed at the bottom of the component to move between steps.

✨ What's New in v2.0

• 🎯 Full TypeScript Support - Complete type definitions for an enhanced development experience
• 🔄 Modern Component Architecture - Refactored to use functional components and React hooks
• 🎨 Major UI/UX Improvements
  • Enhanced responsiveness and layout
  • Modernized styling with new step icons, default colors, and button design
  • Improved performance
  • Better readability
• 💫 Smooth Step Transitions - Added subtle animations when changing between steps
• 🛠️ Enhanced Customization - Streamlined props with new customization options and removal of legacy features
• ⛔️ Breaking Changes - Some props have been removed and renamed. See the Migration Guide for more details.

Example

examples/example.jsx

Installation

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

Navigation buttons are customizable using the various props provided to the ProgressStep component. See the Progress Step Component section for more details.

Simple example to set a specific button text:

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

Hiding the Button Row

To hide the button row, set the removeBtnRow prop to true. The current step can be changed without the buttons by updating and managing the activeStep prop on the <ProgressSteps /> component.

const [activeStep, setActiveStep] = useState(0);

<ProgressSteps activeStep={activeStep}>
    <ProgressStep label="First Step" removeBtnRow>
        <View style={{ alignItems: 'center' }}>
            <Text>This is the content within step 1!</Text>
        </View>
    </ProgressStep>
</ProgressSteps>

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

Progress Step Component

Migration Guide (v1 to v2)

Breaking Changes

Renamed Props

The following props have been renamed for better clarity and consistency:

Removed Props

The following props have been removed in favor of the new styling system:

New Button Styling System

Instead of using style objects, the new version provides specific props for common button customizations:

// Old way
<ProgressStep
  nextBtnStyle={{ backgroundColor: '#2D2D2D' }}
  nextBtnTextStyle={{ color: '#FFFFFF' }}
>
  {/* content */}
</ProgressStep>

// New way
<ProgressStep
  buttonFillColor="#2D2D2D"
  buttonNextTextColor="#FFFFFF"
>
  {/* content */}
</ProgressStep>

See the Progress Step Component section for all available button styling props.

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 GitHub's First Contributions guide or their How to Contribute to Open Source guide.

Author

Colby Miller | https://colbymillerdev.com

License

MIT