{"id":29306964,"url":"https://github.com/nullbeam/react-native-progress-steps","last_synced_at":"2026-05-08T14:03:29.478Z","repository":{"id":236929733,"uuid":"793439447","full_name":"nullbeam/react-native-progress-steps","owner":"nullbeam","description":"Based on colbymillerdev/react-native-progress-steps. A simple and fully customizable React Native component that implements a progress stepper UI.","archived":false,"fork":false,"pushed_at":"2024-04-29T08:37:17.000Z","size":8884,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-06-15T04:44:56.479Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/nullbeam.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-29T08:21:59.000Z","updated_at":"2024-04-29T08:37:27.000Z","dependencies_parsed_at":"2024-04-29T10:04:58.809Z","dependency_job_id":null,"html_url":"https://github.com/nullbeam/react-native-progress-steps","commit_stats":null,"previous_names":["nullbeam/react-native-progress-steps"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nullbeam/react-native-progress-steps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullbeam%2Freact-native-progress-steps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullbeam%2Freact-native-progress-steps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullbeam%2Freact-native-progress-steps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullbeam%2Freact-native-progress-steps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nullbeam","download_url":"https://codeload.github.com/nullbeam/react-native-progress-steps/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullbeam%2Freact-native-progress-steps/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262003969,"owners_count":23243352,"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":"2025-07-07T07:00:51.262Z","updated_at":"2026-05-08T14:03:24.414Z","avatar_url":"https://github.com/nullbeam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://img.shields.io/npm/v/react-native-progress-steps.svg?style=flat)\n![](https://img.shields.io/npm/dt/react-native-progress-steps.svg)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](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* Each steps content is displayed inside of a customizable ScrollView. \n* Fully customizable buttons are displayed at the bottom of the component to move between steps.\n\n\nExample One             |  Example Two\n:-------------------------:|:-------------------------:\n![](assets/react-native-progress-steps_1.gif) [examples/ExampleOne.js](examples/ExampleOne.js)| ![](assets/react-native-progress-steps_2.gif) [examples/ExampleTwo.js](examples/ExampleTwo.js)\n\n\n## Installation\n\nIf using yarn:\n\n```\nyarn add react-native-progress-steps\n```\n\nIf using npm:\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\nButton container and text are fully customizable using the `nextBtnStyle, nextBtnTextStyle, previousBtnStyle, and previousBtnTextStyle` props.\n\nExample usage to change a buttons text color: \n\n```\nconst buttonTextStyle = {\n    color: '#393939'\n};\n\nreturn (\n    \u003cView style={{flex: 1}}\u003e\n        \u003cProgressSteps\u003e\n            \u003cProgressStep label=\"First Step\" nextBtnTextStyle={buttonTextStyle} previousBtnTextStyle={buttonTextStyle}\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\" nextBtnTextStyle={buttonTextStyle} previousBtnTextStyle={buttonTextStyle}\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### Current Step Error and Validation Handling\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```\nstate = {\n    isValid: false,\n    errors: false\n};\n\nonNextStep = () =\u003e {\n    if (!this.state.isValid) {\n      this.setState({ errors: true });\n    } else {\n      this.setState({ errors: false });\n    }\n};\n\nrender() {\n    return (\n      \u003cView style={{ flex: 1 }}\u003e\n        \u003cProgressSteps\u003e\n          \u003cProgressStep label=\"First Step\" onNext={this.onNextStep} errors={this.state.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```\n\n## Documentation\n\n### Progress Steps Component\n| Name                      | Description                              | Default     | Type    |\n|---------------------------|------------------------------------------|-------------|---------|\n| borderWidth               | Width of the progress bar between steps  | 6           | Number  |\n| borderStyle               | Type of border for the progress bar      | solid       | String  |\n| activeStepIconBorderColor | Outside border color for the active step | #4bb543     | String  |\n| progressBarColor          | Color of the default progress bar        | #ebebe4     | String  |\n| completedProgressBarColor | Color of the completed progress bar      | #4bb543     | String  |\n| activeStepIconColor       | Color of the active step icon            | transparent | String  |\n| completedStepIconColor    | Color of the completed step icon         | #4bb543     | String  |\n| disabledStepIconColor     | Color of the disabled step icon          | #ebebe4     | String  |\n| labelFontFamily           | Font family for the step icon label      | iOS/Android default font | String |\n| labelColor                | Color of the default label               | lightgray   | String  |\n| labelFontSize             | Font size for the step icon label        | 14          | Number  |\n| activeLabelColor          | Color of the active label                | #4bb543     | String  |\n| activeLabelFontSize       | Optional font size for the active step icon label      | null     | Number  |\n| completedLabelColor       | Color of the completed label             | lightgray   | String  |\n| activeStepNumColor        | Color of the active step number          | black       | String  |\n| completedStepNumColor     | Color of the completed step number       | black       | String  |\n| disabledStepNumColor      | Color of the disabled step number        | white       | String  |\n| completedCheckColor       | Color of the completed step checkmark    | white       | 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              | 30          | Number  |\n| marginBottom              | Set progress bar bottom margin           | 50          | Number  |\n\n### Progress Step Component\n| Name | Description | Default | Type |\n|------------------|--------------------------------------------------------------------------|----------|---------|\n| label | Title of the current step to be displayed | null | String |\n| onNext | Function called when the next step button is pressed | null | Func |\n| onPrevious | Function called when the previous step button is pressed | null | Func |\n| onSubmit | Function called when the submit step button is pressed | null | Func |\n| nextBtnText | Text to display inside the next button | Next | String |\n| previousBtnText | Text to display inside the previous button | Previous | String |\n| finishBtnText | Text to display inside the button on the last step | Submit | String |\n| nextBtnStyle | Style object to provide to the next/finish buttons | { textAlign: 'center', padding: 8 } | Object |\n| nextBtnTextStyle | Style object to provide to the next/finish button text | { color: '#007aff', fontSize: 18 } | Object |\n| nextBtnDisabled | Value to disable/enable next button | false | Boolean |\n| previousBtnStyle | Style object to provide to the previous button | { textAlign: 'center', padding: 8 } | Object |\n| previousBtnTextStyle | Style object to provide to the previous button text | { color: '#007aff', fontSize: 18 } | Object |\n| previousBtnDisabled | Value to disable/enable previous button | false | Boolean |\n| scrollViewProps | Object to provide props to ScrollView component | {} | 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 | {} | 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\n## Contributing\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 this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)\n\n## Author\nColby Miller | [https://colbymillerdev.com](https://colbymillerdev.com)\n\n## License\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullbeam%2Freact-native-progress-steps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnullbeam%2Freact-native-progress-steps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullbeam%2Freact-native-progress-steps/lists"}