Minimal Stepper Component For React Native

Description:

A minimal React Native stepper for handling step-by-step processes in your app.

How to use it:

1. Install & import.

# Yarn
$ yarn add react-native-step-by-step-process
# NPM
$ npm i react-native-step-by-step-process

import { ProcessContainer, createProcess, useProcess} from 'react-native-step-by-step-process';

2. Basic usage.

import React from 'react';
import {ProcessContainer} from 'react-native-step-by-step-process';
import ProcessStepsCompoents from '../components/ProcessStepsCompoents';
const ProcessStepsScreen = () => {
  return (
    <ProcessContainer initialNumberOfSteps={5}>
      <ProcessStepsCompoents />
    </ProcessContainer>
  );
};
export default ProcessStepsScreen;

import React from "react";
import { Text, View } from "react-native";
import {createProcess, useProcess} from 'react-native-step-by-step-process';
const Process = createProcess();
const ProcessStepsCompoents = () => {
  const {currentStep, activeStep} = useProcess();
  return (
    <View>
      <Process.ProcessFlow>
        <Process.Step>
            <View style={{ alignItems: 'center' }}>
                <Text>Step 1!</Text>
            </View>
        </Process.Step>
        <Process.Step>
            <View style={{ alignItems: 'center' }}>
                <Text>Step 2!</Text>
            </View>
        </Process.Step>
        <Process.Step>
            <View style={{ alignItems: 'center' }}>
                <Text>Step 3!</Text>
            </View>
        </Process.Step>
        <Process.Step>
            <View style={{ alignItems: 'center' }}>
                <Text>Step 4!</Text>
            </View>
        </Process.Step>
        <Process.Step>
            <View style={{ alignItems: 'center' }}>
                <Text>Step 4!</Text>
            </View>
        </Process.Step>
      </Process.ProcessFlow>
    </View>
  );
};

3. Validate steps.

import React from "react";
import { Text, View } from "react-native";
import {createProcess, useProcess} from 'react-native-step-by-step-process';
const Process = createProcess();
const ProcessStepsScreen = () => {
  const {currentStep, activeStep} = useProcess();
  const onPressNextInStep = (nextStepIndex) => {
    if(nextStepIndex === 2){
        return true; // This will prevent the next step from being rendered
    }
  }
  return (
      <Process.ProcessFlow
        activeStepIconColor={'#60a4ac'}
        labelStyle={{color: '#60a4ac'}}
        nextBtnStyle={{backgroundColor: '#60a4ac'}}
        nextBtnTextStyle={{color: 'black'}}
        previousBtnStyle={{backgroundColor: '#60a4ac'}}
        previousBtnTextStyle={{color: 'black'}}
        nextBtnText={t('txtProceed')}
        previousBtnText={t('back')}
        onNext={onPressNextInStep}>
        <Process.Step
            label={t('txtFillStepDate')}
            showFirstStepPreviousButton={true}>
            <View style={{ alignItems: 'center' }}>
                <Text>Step 1!</Text>
            </View>
        </Process.Step>
            <View style={{ alignItems: 'center' }}>
                <Text>Step 2!</Text>
            </View>
        </Process.Step>
            <View style={{ alignItems: 'center' }}>
                <Text>Step 3!</Text>
            </View>
        </Process.Step>
            <View style={{ alignItems: 'center' }}>
                <Text>Step 4!</Text>
            </View>
        </Process.Step>
      </Process.ProcessFlow>
  );
};
export default ProcessStepsScreen;