Socket
Socket
Sign inDemoInstall

react-native-progress-steps

Package Overview
Dependencies
6
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-progress-steps

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


Version published
Maintainers
1
Weekly downloads
1,837
decreased by-6.94%

Weekly downloads

Readme

Source

PRs Welcome

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 OneExample Two
examples/ExampleOne.js examples/ExampleTwo.js

Installation

If using yarn:

yarn add react-native-progress-steps

If using npm:

npm i react-native-progress-steps

Usage

import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';

Simply place a <ProgressStep /> tag for each desired step within the <ProgressSteps /> wrapper.

<View style={{flex: 1}}>
    <ProgressSteps>
        <ProgressStep label="First Step">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 1!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Second Step">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 2!</Text>
            </View>
        </ProgressStep>
        <ProgressStep label="Third Step">
            <View style={{ alignItems: 'center' }}>
                <Text>This is the content within step 3!</Text>
            </View>
        </ProgressStep>
    </ProgressSteps>
</View>

Button Styling Usage

Button container and text are fully customizable using the nextBtnStyle, nextBtnTextStyle, previousBtnStyle, and previousBtnTextStyle props.

Example usage to change a buttons text color:

const buttonTextStyle = {
    color: '#393939'
};

return (
    <View style={{flex: 1}}>
        <ProgressSteps>
            <ProgressStep label="First Step" nextBtnTextStyle={buttonTextStyle} previousBtnTextStyle={buttonTextStyle}>
                <View style={{ alignItems: 'center' }}>
                    <Text>This is the content within step 1!</Text>
                </View>
            </ProgressStep>
            <ProgressStep label="Second Step" nextBtnTextStyle={buttonTextStyle} previousBtnTextStyle={buttonTextStyle}>
                <View style={{ alignItems: 'center' }}>
                    <Text>This is the content within step 2!</Text>
                </View>
            </ProgressStep>
        </ProgressSteps>
    </View>
)

Current Step Error and Validation Handling

The errors 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:

state = {
    isValid: false,
    errors: false
};

onNextStep = () => {
    if (!this.state.isValid) {
      this.setState({ errors: true });
    } else {
      this.setState({ errors: false });
    }
};

render() {
    return (
      <View style={{ flex: 1 }}>
        <ProgressSteps>
          <ProgressStep label="First Step" onNext={this.onNextStep} errors={this.state.errors}>
            <View style={{ alignItems: 'center' }}>
              <Text>This is the content within step 1!</Text>
            </View>
          </ProgressStep>
          <ProgressStep label="Second Step">
            <View style={{ alignItems: 'center' }}>
              <Text>This is the content within step 2!</Text>
            </View>
          </ProgressStep>
        </ProgressSteps>
      </View>
    );
}

Documentation

Progress Steps Component

NameDescriptionDefaultType
borderWidthWidth of the progress bar between steps6Number
borderStyleType of border for the progress barsolidString
activeStepIconBorderColorOutside border color for the active step#4bb543String
progressBarColorColor of the default progress bar#ebebe4String
completedProgressBarColorColor of the completed progress bar#4bb543String
activeStepIconColorColor of the active step icontransparentString
completedStepIconColorColor of the completed step icon#4bb543String
disabledStepIconColorColor of the disabled step icon#ebebe4String
labelFontFamilyFont family for the step icon labeliOS/Android default fontString
labelColorColor of the default labellightgrayString
labelFontSizeFont size for the step icon label14Number
activeLabelColorColor of the active label#4bb543String
activeLabelFontSizeOptional font size for the active step icon labelnullNumber
completedLabelColorColor of the completed labellightgrayString
activeStepNumColorColor of the active step numberblackString
completedStepNumColorColor of the completed step numberblackString
disabledStepNumColorColor of the disabled step numberwhiteString
completedCheckColorColor of the completed step checkmarkwhiteString
activeStepManually specify the active step0Number
isCompleteSet all Steps to active statefalseBoolean
topOffsetSet progress bar top offset30Number
marginBottomSet progress bar bottom margin50Number

Progress Step Component

NameDescriptionDefaultType
labelTitle of the current step to be displayednullString
onNextFunction called when the next step button is pressednullFunc
onPreviousFunction called when the previous step button is pressednullFunc
onSubmitFunction called when the submit step button is pressednullFunc
nextBtnTextText to display inside the next buttonNextString
previousBtnTextText to display inside the previous buttonPreviousString
finishBtnTextText to display inside the button on the last stepSubmitString
nextBtnStyleStyle object to provide to the next/finish buttons{ textAlign: 'center', padding: 8 }Object
nextBtnTextStyleStyle object to provide to the next/finish button text{ color: '#007aff', fontSize: 18 }Object
nextBtnDisabledValue to disable/enable next buttonfalseBoolean
previousBtnStyleStyle object to provide to the previous button{ textAlign: 'center', padding: 8 }Object
previousBtnTextStyleStyle object to provide to the previous button text{ color: '#007aff', fontSize: 18 }Object
previousBtnDisabledValue to disable/enable previous buttonfalseBoolean
scrollViewPropsObject to provide props to ScrollView component{}Object
scrollableThe content of the Progress Step should be scrollabletrueBoolean
viewPropsObject to provide props to view component if scrollable is false{}Object
errorsUsed to assist with current step validation. If true, the next step won't be renderedfalseBoolean
removeBtnRowUsed to render the progress step without the button rowfalseBoolean

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

Author

Colby Miller | https://colbymillerdev.com

License

MIT

Keywords

FAQs

Last updated on 01 Jul 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc