react-native-progress-steps/dist/ProgressSteps/ProgressSteps.js

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

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { times } from 'lodash';
import StepIcon from './StepIcon';
const ProgressSteps = ({ children, isComplete = false, activeStep: initialActiveStep = 0, topOffset = 60, marginBottom = 30, ...props }) => {
    const [stepCount, setStepCount] = React.useState(0);
    const [activeStep, setActiveStep] = React.useState(initialActiveStep);
    React.useEffect(() => {
        setStepCount(React.Children.count(children));
    }, [children]);
    React.useEffect(() => {
        setActiveStep(initialActiveStep);
    }, [initialActiveStep]);
    const handleSetActiveStep = (step) => {
        const boundedStep = Math.min(Math.max(step, 0), stepCount - 1);
        setActiveStep(boundedStep);
    };
    const renderStepIcons = () => {
        return times(stepCount, (i) => {
            const isCompletedStep = isComplete ? true : i < activeStep;
            const isActiveStep = isComplete ? false : i === activeStep;
            return (React.createElement(View, { key: i, style: styles.stepContainer },
                React.createElement(StepIcon, { ...props, stepNum: i + 1, label: children[i].props.label, isFirstStep: i === 0, isLastStep: i === stepCount - 1, isCompletedStep: isCompletedStep, isActiveStep: isActiveStep })));
        });
    };
    return (React.createElement(View, { style: styles.container },
        React.createElement(View, { style: [styles.stepsContainer, { paddingTop: topOffset, marginBottom }] }, renderStepIcons()),
        React.createElement(View, { style: styles.contentContainer }, React.cloneElement(children[activeStep], {
            setActiveStep: handleSetActiveStep,
            activeStep,
            stepCount,
        }))));
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    stepsContainer: {
        flexDirection: 'row',
        width: '100%',
    },
    stepContainer: {
        flex: 1,
    },
    contentContainer: {
        flex: 1,
    },
});
export default ProgressSteps;