{"id":4331,"url":"https://github.com/colbymillerdev/react-native-progress-steps","last_synced_at":"2025-08-04T01:32:04.865Z","repository":{"id":45059468,"uuid":"166507721","full_name":"colbymillerdev/react-native-progress-steps","owner":"colbymillerdev","description":"A simple and fully customizable React Native component that implements a progress stepper UI.","archived":false,"fork":false,"pushed_at":"2023-05-14T09:46:29.000Z","size":8911,"stargazers_count":345,"open_issues_count":50,"forks_count":140,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2024-04-26T02:36:09.105Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/colbymillerdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-01-19T04:55:43.000Z","updated_at":"2024-04-10T10:38:59.000Z","dependencies_parsed_at":"2024-01-08T01:02:50.481Z","dependency_job_id":"ababab26-ba9b-46cb-87e5-11fe65b16137","html_url":"https://github.com/colbymillerdev/react-native-progress-steps","commit_stats":{"total_commits":70,"total_committers":8,"mean_commits":8.75,"dds":0.3285714285714286,"last_synced_commit":"a892879f0fe53e8039c3905c9ae41a327fe5ae7b"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colbymillerdev%2Freact-native-progress-steps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colbymillerdev%2Freact-native-progress-steps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colbymillerdev%2Freact-native-progress-steps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colbymillerdev%2Freact-native-progress-steps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colbymillerdev","download_url":"https://codeload.github.com/colbymillerdev/react-native-progress-steps/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228582487,"owners_count":17940587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:08.488Z","updated_at":"2025-08-04T01:32:04.850Z","avatar_url":"https://github.com/colbymillerdev.png","language":"JavaScript","readme":"![](https://img.shields.io/npm/v/react-native-progress-steps.svg)\n![](https://img.shields.io/npm/dm/react-native-progress-steps)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n\n# React Native Progress Steps\n\nA simple and fully customizable React Native component that implements a progress stepper UI.\n\n- Each steps content is displayed inside of a customizable ScrollView.\n- Customizable buttons are displayed at the bottom of the component to move between steps.\n\n## ✨ What's New in v2.0\n\n- 🎯 **Full TypeScript Support** - Complete type definitions for an enhanced development experience\n- 🔄 **Modern Component Architecture** - Refactored to use functional components and React hooks\n- 🎨 **Major UI/UX Improvements**\n  - Enhanced responsiveness and layout\n  - Modernized styling with new step icons, default colors, and button design\n  - Improved performance\n  - Better readability\n- 💫 **Smooth Step Transitions** - Added subtle animations when changing between steps\n- 🛠️ **Enhanced Customization** - Streamlined props with new customization options and removal of legacy features\n- ⛔️ **Breaking Changes** - Some props have been removed and renamed. See the [Migration Guide](#migration-guide-v1-to-v2) for more details.\n\n## Example\n\n\u003cimg src=\"assets/example.png\" width=\"300\" height=\"600\" \n     style=\"border-radius: 15px; border: 2px solid #ccc; display: block;\" /\u003e\n\n\u003ca href=\"examples/example.jsx\"\u003eexamples/example.jsx\u003c/a\u003e\n\n## Installation\n\n```\nnpm i react-native-progress-steps\n```\n\n## Usage\n\n```\nimport { ProgressSteps, ProgressStep } from 'react-native-progress-steps';\n```\n\nSimply place a `\u003cProgressStep /\u003e` tag for each desired step within the `\u003cProgressSteps /\u003e` wrapper.\n\n```\n\u003cView style={{flex: 1}}\u003e\n    \u003cProgressSteps\u003e\n        \u003cProgressStep label=\"First Step\"\u003e\n            \u003cView style={{ alignItems: 'center' }}\u003e\n                \u003cText\u003eThis is the content within step 1!\u003c/Text\u003e\n            \u003c/View\u003e\n        \u003c/ProgressStep\u003e\n        \u003cProgressStep label=\"Second Step\"\u003e\n            \u003cView style={{ alignItems: 'center' }}\u003e\n                \u003cText\u003eThis is the content within step 2!\u003c/Text\u003e\n            \u003c/View\u003e\n        \u003c/ProgressStep\u003e\n        \u003cProgressStep label=\"Third Step\"\u003e\n            \u003cView style={{ alignItems: 'center' }}\u003e\n                \u003cText\u003eThis is the content within step 3!\u003c/Text\u003e\n            \u003c/View\u003e\n        \u003c/ProgressStep\u003e\n    \u003c/ProgressSteps\u003e\n\u003c/View\u003e\n```\n\n### Button Styling Usage\n\nNavigation buttons are customizable using the various props provided to the `ProgressStep` component. See the [Progress Step Component](#progress-step-component) section for more details.\n\nSimple example to set a specific button text:\n\n```\nreturn (\n    \u003cView style={{flex: 1}}\u003e\n        \u003cProgressSteps\u003e\n            \u003cProgressStep label=\"First Step\" buttonNextText=\"Next Step\" buttonPreviousText=\"Previous Step\"\u003e\n                \u003cView style={{ alignItems: 'center' }}\u003e\n                    \u003cText\u003eThis is the content within step 1!\u003c/Text\u003e\n                \u003c/View\u003e\n            \u003c/ProgressStep\u003e\n            \u003cProgressStep label=\"Second Step\" buttonNextText=\"Next Step\" buttonPreviousText=\"Previous Step\"\u003e\n                \u003cView style={{ alignItems: 'center' }}\u003e\n                    \u003cText\u003eThis is the content within step 2!\u003c/Text\u003e\n                \u003c/View\u003e\n            \u003c/ProgressStep\u003e\n        \u003c/ProgressSteps\u003e\n    \u003c/View\u003e\n)\n```\n\n### Hiding the Button Row\n\nTo hide the button row, set the `removeBtnRow` prop to `true`. The current step can be changed without the buttons by updating and managing the `activeStep` prop on the `\u003cProgressSteps /\u003e` component.\n\n```\nconst [activeStep, setActiveStep] = useState(0);\n\n\u003cProgressSteps activeStep={activeStep}\u003e\n    \u003cProgressStep label=\"First Step\" removeBtnRow\u003e\n        \u003cView style={{ alignItems: 'center' }}\u003e\n            \u003cText\u003eThis is the content within step 1!\u003c/Text\u003e\n        \u003c/View\u003e\n    \u003c/ProgressStep\u003e\n\u003c/ProgressSteps\u003e\n```\n\n### Current Step Error and Validation Handling\n\nThe `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`.\n\nExample usage of validation check:\n\n```\nconst [isValid, setIsValid] = useState(false);\nconst [errors, setErrors] = useState(false);\n\nconst onNextStep = () =\u003e {\n    if (!isValid) {\n      setErrors(true);\n    } else {\n      setErrors(false);\n    }\n};\n\nreturn (\n    \u003cView style={{ flex: 1 }}\u003e\n        \u003cProgressSteps\u003e\n          \u003cProgressStep label=\"First Step\" onNext={onNextStep} errors={errors}\u003e\n            \u003cView style={{ alignItems: 'center' }}\u003e\n              \u003cText\u003eThis is the content within step 1!\u003c/Text\u003e\n            \u003c/View\u003e\n          \u003c/ProgressStep\u003e\n          \u003cProgressStep label=\"Second Step\"\u003e\n            \u003cView style={{ alignItems: 'center' }}\u003e\n              \u003cText\u003eThis is the content within step 2!\u003c/Text\u003e\n            \u003c/View\u003e\n          \u003c/ProgressStep\u003e\n        \u003c/ProgressSteps\u003e\n      \u003c/View\u003e\n);\n```\n\n## Documentation\n\n### Progress Steps Component\n\n| Name                      | Description                                       | Default        | Type    |\n| ------------------------- | ------------------------------------------------- | -------------- | ------- |\n| borderWidth               | Width of the progress bar between steps           | 2              | Number  |\n| activeStepIconBorderColor | Outside border color for the active step          | #2D2D2D        | String  |\n| progressBarColor          | Color of the default progress bar                 | #EBEBE4        | String  |\n| completedProgressBarColor | Color of the completed progress bar               | #2D2D2D        | String  |\n| activeStepIconColor       | Color of the active step icon                     | transparent    | String  |\n| completedStepIconColor    | Color of the completed step icon                  | #2D2D2D        | String  |\n| disabledStepIconColor     | Color of the disabled step icon                   | #EBEBE4        | String  |\n| labelFontFamily           | Font family for the step icon label               | System default | String  |\n| labelColor                | Color of the default label                        | #D3D3D3        | String  |\n| labelFontSize             | Font size for the step icon label                 | 14             | Number  |\n| activeLabelColor          | Color of the active label                         | #2D2D2D        | String  |\n| activeLabelFontSize       | Optional font size for the active step icon label | 14             | Number  |\n| completedLabelColor       | Color of the completed label                      | #2D2D2D        | String  |\n| activeStepNumColor        | Color of the active step number                   | #2D2D2D        | String  |\n| completedStepNumColor     | Color of the completed step number                | #2D2D2D        | String  |\n| disabledStepNumColor      | Color of the disabled step number                 | #FFFFFF        | String  |\n| completedCheckColor       | Color of the completed step checkmark             | #FFFFFF        | String  |\n| activeStep                | Manually specify the active step                  | 0              | Number  |\n| isComplete                | Set all Steps to active state                     | false          | Boolean |\n| topOffset                 | Set progress bar top offset                       | 60             | Number  |\n| marginBottom              | Set progress bar bottom margin                    | 30             | Number  |\n\n### Progress Step Component\n\n| Name                    | Description                                                                           | Default   | Type    |\n| ----------------------- | ------------------------------------------------------------------------------------- | --------- | ------- |\n| label                   | Title of the current step to be displayed                                             | undefined | String  |\n| onNext                  | Function called when the next step button is pressed                                  | undefined | Func    |\n| onPrevious              | Function called when the previous step button is pressed                              | undefined | Func    |\n| onSubmit                | Function called when the submit step button is pressed                                | undefined | Func    |\n| scrollViewProps         | Object to provide props to ScrollView component                                       | undefined | Object  |\n| scrollable              | The content of the Progress Step should be scrollable                                 | true      | Boolean |\n| viewProps               | Object to provide props to view component if scrollable is false                      | undefined | Object  |\n| errors                  | Used to assist with current step validation. If true, the next step won't be rendered | false     | Boolean |\n| removeBtnRow            | Used to render the progress step without the button row                               | false     | Boolean |\n| buttonNextText          | Text to display inside the next button                                                | Next      | String  |\n| buttonPreviousText      | Text to display inside the previous button                                            | Previous  | String  |\n| buttonFinishText        | Text to display inside the button on the last step                                    | Submit    | String  |\n| buttonNextDisabled      | Value to disable/enable next button                                                   | false     | Boolean |\n| buttonPreviousDisabled  | Value to disable/enable previous button                                               | false     | Boolean |\n| buttonFinishDisabled    | Value to disable/enable finish button                                                 | false     | Boolean |\n| buttonTopOffset         | Set button row top offset                                                             | 12        | Number  |\n| buttonBottomOffset      | Set button row bottom offset                                                          | 20        | Number  |\n| buttonHorizontalOffset  | Set button row horizontal offset                                                      | 30        | Number  |\n| buttonFillColor         | Background color for the next/finish buttons                                          | #2D2D2D   | String  |\n| buttonBorderColor       | Border color for the previous button                                                  | #2D2D2D   | String  |\n| buttonNextTextColor     | Text color for the next button                                                        | #FFFFFF   | String  |\n| buttonPreviousTextColor | Text color for the previous button                                                    | #2D2D2D   | String  |\n| buttonFinishTextColor   | Text color for the finish button                                                      | #FFFFFF   | String  |\n| buttonDisabledColor     | Background color for disabled buttons                                                 | #CDCDCD   | String  |\n| buttonDisabledTextColor | Text color for disabled buttons                                                       | #FFFFFF   | String  |\n\n## Migration Guide (v1 to v2)\n\n### Breaking Changes\n\n#### Renamed Props\n\nThe following props have been renamed for better clarity and consistency:\n\n| Old Prop Name       | New Prop Name          | Component    |\n| ------------------- | ---------------------- | ------------ |\n| nextBtnText         | buttonNextText         | ProgressStep |\n| previousBtnText     | buttonPreviousText     | ProgressStep |\n| finishBtnText       | buttonFinishText       | ProgressStep |\n| nextBtnDisabled     | buttonNextDisabled     | ProgressStep |\n| previousBtnDisabled | buttonPreviousDisabled | ProgressStep |\n\n#### Removed Props\n\nThe following props have been removed in favor of the new styling system:\n\n| Removed Prop         | Alternative                                            |\n| -------------------- | ------------------------------------------------------ |\n| nextBtnStyle         | Use `buttonFillColor` and other button styling props   |\n| nextBtnTextStyle     | Use `buttonNextTextColor` instead                      |\n| previousBtnStyle     | Use `buttonBorderColor` and other button styling props |\n| previousBtnTextStyle | Use `buttonPreviousTextColor` instead                  |\n| finishBtnStyle       | Use `buttonFillColor` and other button styling props   |\n| finishBtnTextStyle   | Use `buttonFinishTextColor` instead                    |\n| borderStyle          | No longer supported                                    |\n\n#### New Button Styling System\n\nInstead of using style objects, the new version provides specific props for common button customizations:\n\n```\n// Old way\n\u003cProgressStep\n  nextBtnStyle={{ backgroundColor: '#2D2D2D' }}\n  nextBtnTextStyle={{ color: '#FFFFFF' }}\n\u003e\n  {/* content */}\n\u003c/ProgressStep\u003e\n\n// New way\n\u003cProgressStep\n  buttonFillColor=\"#2D2D2D\"\n  buttonNextTextColor=\"#FFFFFF\"\n\u003e\n  {/* content */}\n\u003c/ProgressStep\u003e\n```\n\nSee the [Progress Step Component](#progress-step-component) section for all available button styling props.\n\n## Contributing\n\nPull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.\n\n**Working on your first Pull Request?** You can learn how from GitHub's [First Contributions](https://github.com/firstcontributions/first-contributions) guide or their [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/) guide.\n\n## Author\n\nColby Miller | [https://colbymillerdev.com](https://colbymillerdev.com)\n\n## License\n\n[MIT](./LICENSE)\n","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolbymillerdev%2Freact-native-progress-steps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolbymillerdev%2Freact-native-progress-steps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolbymillerdev%2Freact-native-progress-steps/lists"}