React Native Stepper View

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

Installation

1yarn add react-native-stepper-view

Screenshots

• Android Screenshot
• iOS Screenshot
• Web Screenshot

Usage

1import * as React from 'react';
2import { View, Text } from 'react-native';
3import Stepper from 'react-native-stepper-view';
4
5const App: React.FC = () => {
6  const handleSubmit = React.useCallback(() => {
7    console.log('submitted');
8  }, [])
9
10  const handlePrevStep = React.useCallback((prevStep: number) => {
11    console.log('navigate to:', prevStep);
12  }, []);
13
14  const handleNextStep = React.useCallback((nextStep: number) => {
15    console.log('navigate to:', nextStep);
16  }, []);
17
18  return (
19    <Stepper
20      onSubmit={handleSubmit}
21      onPrevStep={handlePrevStep}
22      onNextStep={handleNextStep}
23      numberOfSteps={3}
24    >
25      <Stepper.Step label="Step 1">
26        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
27          <Text>Step 1 view</Text>
28        </View>
29      </Stepper.Step>
30
31      <Stepper.Step label="Step 2">
32        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
33          <Text>Step 2 view</Text>
34        </View>
35      </Stepper.Step>
36
37      <Stepper.Step label="Step 3">
38        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
39          <Text>Step 3 view</Text>
40        </View>
41      </Stepper.Step>
42    </Stepper>
43  );
44};

See example for a more detailed usage.

API

<Stepper />

numberOfSteps={number}: Determines the number of steps.

activeStep={number}: Manually specify the active step.

showButtons={boolean}: When set to false, the buttons (previous, next and submit) are not rendered.

allCompleted={boolean}: Marks all steps as completed.

onPrevStep={(prevStep: number) => void}: Triggered when navigate to the previous step.

onNextStep={(nextStep: number) => void}: Triggered when navigate to the next step.

onSubmit={() => void}: It is triggered when the submit button in the last step is pressed.

stepProps={object}: Used to assign props to each step.

ButtonComponent={React.ComponentType}: Component of the buttons (previous, next and submit).

stepContainerStyle={StyleProp<ViewStyle>}: Used to style the step container view.

buttonsContainerStyle={StyleProp<ViewStyle>}: Used to style the buttons container view.

stepIconsContainerStyle={StyleProp<ViewStyle>}: Used to style the step icons container view.

prevButtonDisabled={boolean}: When set true, the previous button is disabled.

nextButtonDisabled={boolean}: When set true, the next button is disabled.

submitButtonDisabled={boolean}: When set true, the submit button is disabled.

<Stepper.Step />

label={string}: Title of the step.

activeIcon={React.ReactElement<TextProps>}: Icon of active step.

disabledIcon={React.ReactElement<TextProps>}: Icon of disabled step.

completedIcon={React.ReactElement<TextProps>}: Icon of completed step.

progressBarSize={number}: Height of the progress bar.

progressBarBgColor={ColorValue}: Background color of the default progress bar.

completedProgressBarBgColor={ColorValue}: Background color of the completed progress bar.

activeStepIconBgColor={ColorValue}: Background color of the active step icon.

disabledStepIconBgColor={ColorValue}: Background color of the disabled step icon.

completedStepIconBgColor={ColorValue}: Background color of the completed step icon.

activeStepIconBorderColor={ColorValue}: Border color of the active step icon.

labelColor={ColorValue}: Color of the default label.

labelFontSize={number}: Font size for the step icon label.

labelFontFamily={string}: Font family for the step icon label.

labelFontWeight={TextStyle['fontWeight']}: Font weight for the step icon label.

activeLabelColor={ColorValue}: Color of the active label.

activeLabelFontSize={number}: Font size for the active step icon label.

completedLabelColor={ColorValue}: Color of the completed label.

stepNumFontSize={number}: Font size for the step number.

stepNumFontFamily={string}: Font family for the step number.

stepNumFontWeight={TextStyle['fontWeight']}: Font weight for the step number.

activeStepNumColor={ColorValue}: Color of the active step number.

disabledStepNumColor={ColorValue}: Color of the disabled step number.

completedCheckColor={ColorValue}: Color of the completed step checkmark.

<Stepper ref={stepperRef} />

stepperRef.jumpToStep(value): Used to navigate to the step.

stepperRef.prevStep(): Used to navigate to the previous step.

stepperRef.nextStep(): Used to navigate to the next step.

stepperRef.showButtons(): Used to show the buttons.

stepperRef.hideButtons(): Used to hide the buttons.

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