rn-steps-indicator v1.0.0

React Native Step Indicator

A simple react-native Step Indicator widget with custom styling using react-native-reanimated for introducing custom animations, in the manner we have it as a peer dependency, and implemented completely with typescript.

Installation

npm install rn-steps-indicator react-native-reanimated

Simple Usage

import StepIndicator from 'rn-steps-indicator';

// ...

const steps = ["This is my label", "This is my other label", "This is the third label"]

const defaultStyles = {
    completed: {
        label: {
            fontSize: 14,
            fontFamily: 'Roboto'
        };
        indicator: {
            borderWidth: 1,
            size: 30,
            color: 'red',
        };
        stroke: {};
    },
    uncompleted: {
        label: {
            fontSize: 14,
            fontFamily: 'Roboto'
        };
        indicator: {
            borderWidth: 1,
            size: 30,
            color: 'blue',
        };
        stroke: {
            style: 'dashed'
            thickness: 3,
        };
    },
    current: {
        label: {
            fontSize: 18,
            fontFamily: 'Roboto'
        };
        indicator: {
            borderWidth: 3,
            size: 45,
            color: 'green',
        };
    }
}

const MyRNStepIndicator = () => {
    return (
        <StepIndicator
            steps={steps}
            currentStep={currentStep}
            setCurrentStep={setCurrentStep}
            customStyles={defaultStyles}
        />
    )
}

export default MyRNStepIndicator;

Customizing Indicator and Label

import StepIndicator from 'rn-steps-indicator';

// ...

const steps = ["This is my label", "This is my other label", "This is the third label"]

const defaultStyles = {
    ...
}

const renderCustomLabel = (step, status) => {
    switch (status) {
        case 'current':
            return (
            <Text style={styles.customStepIndicatorLabel}>{step}</Text>
            );
        case 'completed':
        case 'uncompleted':
        default:
            return null;
    }
}

const renderCustomIndicator = (step, status) => {
    switch (status) {
        case 'current':
            return <Ionicons name="analytics-sharp" />;
        case 'completed':
            return <Ionicons name="checkmark" />;
        case 'uncompleted':
        default:
            return null;
    }
}

const MyRNStepIndicator = () => {
    return (
        <StepIndicator
            steps={steps}
            currentStep={currentStep}
            setCurrentStep={setCurrentStep}
            customStyles={defaultStyles}
            renderLabel={renderCustomLabel}
            renderStepIndicator={renderCustomIndicator}
        />
    )
}

export default MyRNStepIndicator;

Step Indicator Properties

Custom Styles

Indicator

Stroke

DashStyles

Indicator

Indicator

Stroke

DashStyles

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library