A TypeScript-based, fully customizable React Native component for implementing a streamlined progress stepper UI, adhering to modern React Native standards.
npm install @ouedraogof/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 One | Example Two
:-------------------------:|:-------------------------:
 examples/ExampleOne.js|  examples/ExampleTwo.js
If using yarn:
``
yarn add @ouedraogof/react-native-progress-steps
If using npm:
`
npm i @ouedraogof/react-native-progress-steps
`
import { ProgressSteps, ProgressStep } from '@ouedraogof/react-native-progress-steps';
Simply place a tag for each desired step within the wrapper.
`
props.Example usage to change a buttons text color:
`
const buttonTextStyle = {
color: '#393939'
};return (
This is the content within step 1!
This is the content within step 2!
)
$3
typescript
import React from 'react';
import { View, Text, ScrollViewProps } from 'react-native';
import { ProgressSteps, ProgressStep } from '@ouedraogof/react-native-progress-steps';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 (
onNext={onPaymentStepComplete}
onPrevious={onPrevStep}
scrollViewProps={defaultScrollViewProps}
>
Payment step content
onNext={onNextStep}
onPrevious={onPrevStep}
scrollViewProps={defaultScrollViewProps}
>
Shipping address step content
onNext={onNextStep}
onPrevious={onPrevStep}
scrollViewProps={defaultScrollViewProps}
>
Billing address step content
onPrevious={onPrevStep}
onSubmit={onSubmitSteps}
scrollViewProps={defaultScrollViewProps}
>
Confirm order step content
);
};
export default ExampleOne;
`typescript
import React from 'react';
import { View, Text, ScrollViewProps, ViewStyle, TextStyle } from 'react-native';
import { ProgressSteps, ProgressStep } from '@ouedraogof/react-native-progress-steps';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 (
onNext={onNextStep}
onPrevious={onPrevStep}
scrollViewProps={defaultScrollViewProps}
nextBtnTextStyle={buttonTextStyle}
previousBtnTextStyle={buttonTextStyle}
>
This is the content within step 1!
onNext={onNextStep}
onPrevious={onPrevStep}
scrollViewProps={defaultScrollViewProps}
nextBtnTextStyle={buttonTextStyle}
previousBtnTextStyle={buttonTextStyle}
>
This is the content within step 2!
onNext={onNextStep}
onPrevious={onPrevStep}
scrollViewProps={defaultScrollViewProps}
nextBtnTextStyle={buttonTextStyle}
previousBtnTextStyle={buttonTextStyle}
>
This is the content within step 3!
onNext={onNextStep}
onPrevious={onPrevStep}
scrollViewProps={defaultScrollViewProps}
nextBtnTextStyle={buttonTextStyle}
previousBtnTextStyle={buttonTextStyle}
>
This is the content within step 4!
onPrevious={onPrevStep}
onSubmit={onSubmitSteps}
scrollViewProps={defaultScrollViewProps}
nextBtnTextStyle={buttonTextStyle}
previousBtnTextStyle={buttonTextStyle}
>
This is the content within step 5!
);
};
export default ExampleTwo;
`$3
The 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 (
This is the content within step 1!
This is the content within step 2!
);
Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub