{"id":21071182,"url":"https://github.com/minhomega/rn-step-indicator","last_synced_at":"2025-10-04T02:04:15.378Z","repository":{"id":129105637,"uuid":"604758931","full_name":"MinhOmega/rn-step-indicator","owner":"MinhOmega","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-21T18:21:33.000Z","size":1429,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-06T23:44:35.927Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MinhOmega.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2023-02-21T18:20:48.000Z","updated_at":"2023-02-21T18:21:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"f4897ba9-90fa-4e2b-a9ef-2bf17a454524","html_url":"https://github.com/MinhOmega/rn-step-indicator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MinhOmega/rn-step-indicator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinhOmega%2Frn-step-indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinhOmega%2Frn-step-indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinhOmega%2Frn-step-indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinhOmega%2Frn-step-indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MinhOmega","download_url":"https://codeload.github.com/MinhOmega/rn-step-indicator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinhOmega%2Frn-step-indicator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275059602,"owners_count":25398366,"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","status":"online","status_checked_at":"2025-09-14T02:00:10.474Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-11-19T18:50:23.788Z","updated_at":"2025-10-04T02:04:10.346Z","avatar_url":"https://github.com/MinhOmega.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-step-indicator\n\nA simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.\n\nFeatures\n\n  - Can be used with ViewPager and Listview\n  - Custom Styling\n  - Supports vertical and horizontal orientation\n  - Supports animation between steps\n\n\n![alt tag](https://raw.githubusercontent.com/akash-gupt/react-native-step-indicator/master/art/HorizontalStepIndicator.gif) \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; ![alt tag](https://raw.githubusercontent.com/akash-gupt/react-native-step-indicator/master/art/VerticalStepIndicator.gif)\n [example/src/HorizontalStepIndicator.tsx](example/src/HorizontalStepIndicator.tsx)   \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; [example/src/VerticalStepIndicator.tsx](example/src/VerticalStepIndicator.tsx)\n\n### Example\n```sh\n$ yarn\n$ yarn example ios   // For ios\n$ yarn example android   // For Android\n```\n\n### Installation\n``npm install react-native-step-indicator-v2 --save``\n\nor\n\n``yarn add react-native-step-indicator-v2``\n\n### Usage\n```javascript\nimport StepIndicator from 'react-native-step-indicator-v2';\n\nconst labels = [\"Cart\",\"Delivery Address\",\"Order Summary\",\"Payment Method\",\"Track\"];\nconst customStyles = {\n  stepIndicatorSize: 25,\n  currentStepIndicatorSize:30,\n  separatorStrokeWidth: 2,\n  currentStepStrokeWidth: 3,\n  stepStrokeCurrentColor: '#fe7013',\n  stepStrokeWidth: 3,\n  stepStrokeFinishedColor: '#fe7013',\n  stepStrokeUnFinishedColor: '#aaaaaa',\n  separatorFinishedColor: '#fe7013',\n  separatorUnFinishedColor: '#aaaaaa',\n  stepIndicatorFinishedColor: '#fe7013',\n  stepIndicatorUnFinishedColor: '#ffffff',\n  stepIndicatorCurrentColor: '#ffffff',\n  stepIndicatorLabelFontSize: 13,\n  currentStepIndicatorLabelFontSize: 13,\n  stepIndicatorLabelCurrentColor: '#fe7013',\n  stepIndicatorLabelFinishedColor: '#ffffff',\n  stepIndicatorLabelUnFinishedColor: '#aaaaaa',\n  labelColor: '#999999',\n  labelSize: 13,\n  currentStepLabelColor: '#fe7013',\n  borderRadiusSize: 10\n}\n\n\nconstructor() {\n    this.state = {\n        currentPosition: 0\n    }\n}\n\nrender() {\n  return (\n    \u003cStepIndicator\n         customStyles={customStyles}\n         currentPosition={this.state.currentPosition}\n         labels={labels}\n    /\u003e\n  )\n}\n\nonPageChange(position){\n    this.setState({currentPosition: position});\n}\n//...\n```\n\n### Properties\n\n| Name | Type | Description | Default\n| ------------ | ------------- | ------------ |------------ |\n| `currentPosition` | Number  | Current position in steps | 0\n| ```stepCount``` | Number  | Number of steps | 5\n| ```direction``` | String  | Orientation(i.e. horizontal,vertical) | horizontal\n| ```customStyles``` | Object  | Custom styling | {}\n| ```labels``` | Array  | Labels for each step | null\n| `onPress` | Function (position: Number) | Function called when a step is pressed | null\n| `renderStepIndicator` | Function (position: Number, stepStatus: String) | Use this to render custom content inside step | null \n| `renderLabel` | Function (position: Number, stepStatus: String, label: String, currentPosition: Number) | Use this to render custom label for each step | null \n\n### Custom Styles\n\n| Name | Type | Default\n| ------------ | ------------ |------------ |\n| ```stepIndicatorSize``` | Number  | 30\n| ```currentStepIndicatorSize``` | Number  | 40\n| ```separatorStrokeWidth``` | Number  | 3\n| ```separatorStrokeUnfinishedWidth``` | Number  | 0\n| ```separatorStrokeFinishedWidth``` | Number  | 0\n| ```stepStrokeWidth``` | Number  | 0\n| ```currentStepStrokeWidth``` | Number  | 5\n| ```stepStrokeCurrentColor``` | String  | '#4aae4f'\n| ```stepStrokeFinishedColor``` | String  | '#4aae4f'\n| ```stepStrokeUnFinishedColor``` | String  | '#4aae4f'\n| ```separatorFinishedColor``` | String  | '#4aae4f'\n| ```separatorUnFinishedColor``` | String  | '#a4d4a5'\n| ```stepIndicatorFinishedColor``` | String  | '#4aae4f'\n| ```stepIndicatorUnFinishedColor``` | String  | '#a4d4a5'\n| ```stepIndicatorCurrentColor``` | String  | '#ffffff'\n| ```stepIndicatorLabelFontSize``` | Number  | 15\n| ```currentStepIndicatorLabelFontSize``` | Number  | 15\n| ```stepIndicatorLabelCurrentColor``` | String  | '#000000'\n| ```stepIndicatorLabelFinishedColor``` | String  | '#ffffff'\n| ```stepIndicatorLabelUnFinishedColor``` | String  | 'rgba(255,255,255,0.5)'\n| ```labelColor``` | String  | '#000000'\n| ```currentStepLabelColor``` | String  | '#4aae4f'\n| ```labelSize``` | Number  | 13\n| ```labelAlign``` | String  | 'center'\n| ```labelFontFamily``` | String  |\n| ```borderRadiusSize``` | String | 10\n\n\n### Contributing\n\nIf you'd like to see something added or changed to this module please open a new GitHub issue. Pull requests are always welcome.\n\n### License\n\n - [Apache-2.0](https://github.com/akash-gupt/react-native-step-indicator/blob/master/LICENSE).  © Akash Gupta\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminhomega%2Frn-step-indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminhomega%2Frn-step-indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminhomega%2Frn-step-indicator/lists"}