{"id":4002,"url":"https://github.com/24ark/react-native-step-indicator","last_synced_at":"2025-05-14T21:04:30.673Z","repository":{"id":16584296,"uuid":"79597878","full_name":"24ark/react-native-step-indicator","owner":"24ark","description":"A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.","archived":false,"fork":false,"pushed_at":"2023-02-17T22:43:26.000Z","size":5993,"stargazers_count":1455,"open_issues_count":85,"forks_count":312,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-07T21:40:07.215Z","etag":null,"topics":["listview","progress-view","react-native","step","viewpager"],"latest_commit_sha":null,"homepage":"","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/24ark.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}},"created_at":"2017-01-20T20:59:40.000Z","updated_at":"2025-04-25T11:37:45.000Z","dependencies_parsed_at":"2024-04-25T00:41:15.589Z","dependency_job_id":"0132db68-8689-467c-8319-31f864bd4ba1","html_url":"https://github.com/24ark/react-native-step-indicator","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"1df202c5f819b58445c2b1b99a0e08dc8398f4e0"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/24ark%2Freact-native-step-indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/24ark%2Freact-native-step-indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/24ark%2Freact-native-step-indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/24ark%2Freact-native-step-indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/24ark","download_url":"https://codeload.github.com/24ark/react-native-step-indicator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253492529,"owners_count":21916959,"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":["listview","progress-view","react-native","step","viewpager"],"created_at":"2024-01-05T20:16:58.149Z","updated_at":"2025-05-14T21:04:30.626Z","avatar_url":"https://github.com/24ark.png","language":"TypeScript","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/24ark/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/24ark/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 --save``\n\nor\n\n``yarn add react-native-step-indicator``\n\n### Usage\n```javascript\nimport StepIndicator from 'react-native-step-indicator';\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}\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\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/24ark/react-native-step-indicator/blob/master/LICENSE).  © Arkit Vora\n","funding_links":[],"categories":["Components","TypeScript","Others","React, React Native"],"sub_categories":["UI","Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F24ark%2Freact-native-step-indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F24ark%2Freact-native-step-indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F24ark%2Freact-native-step-indicator/lists"}