{"id":25690751,"url":"https://github.com/csath/react-native-segment-controller","last_synced_at":"2025-10-30T21:13:38.575Z","repository":{"id":57339860,"uuid":"112909052","full_name":"csath/react-native-segment-controller","owner":"csath","description":"A react-native segment controller(Tab) for both ios and android.","archived":false,"fork":false,"pushed_at":"2019-04-07T14:48:21.000Z","size":86424,"stargazers_count":18,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-27T04:42:43.582Z","etag":null,"topics":["android","ios","react-native","segmentcontrol","segmented-controls","tabbar","tabbarcontroller","tabs"],"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/csath.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}},"created_at":"2017-12-03T07:32:48.000Z","updated_at":"2021-03-16T20:05:12.000Z","dependencies_parsed_at":"2022-09-12T12:33:34.347Z","dependency_job_id":null,"html_url":"https://github.com/csath/react-native-segment-controller","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/csath/react-native-segment-controller","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csath%2Freact-native-segment-controller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csath%2Freact-native-segment-controller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csath%2Freact-native-segment-controller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csath%2Freact-native-segment-controller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csath","download_url":"https://codeload.github.com/csath/react-native-segment-controller/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csath%2Freact-native-segment-controller/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262406945,"owners_count":23306285,"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":["android","ios","react-native","segmentcontrol","segmented-controls","tabbar","tabbarcontroller","tabs"],"created_at":"2025-02-24T22:51:02.541Z","updated_at":"2025-10-30T21:13:38.486Z","avatar_url":"https://github.com/csath.png","language":"JavaScript","readme":"# react-native-segment-controller [![npm version](https://badge.fury.io/js/react-native-segment-controller.svg)](https://badge.fury.io/js/react-native-segment-controller)\nA react-native segment controller for both android and ios. You can define any number of tabs or segemnts and this will automatically adjust according to the wrapped view's width. You can also add badge count to specify any integer to user.\n\n# Demo\n\n![Alt text](/screenshots/1.gif?raw=true \"segment-controller\")\n\n# Installation\n```\nyarn add react-native-segment-controller  or npm install --save react-native-segment-controller\n```\n\n# Usage\n```js\nimport SegmentControl from 'react-native-segment-controller';\n\n \u003cSegmentControl\n          values={['One', 'Two', 'Three', 'Four']}\n          badges={[0, 5, 0, 2]}\n          selectedIndex={0}\n          height={30}\n          onTabPress={() =\u003e {}}\n          borderRadius={5}\n /\u003e\n ```\n # Prop-types\n \n | Prop name  |Type |\n| ------------- | ------------- |\n| values  | list - list of names for Tabs  |\n| badges  | list - list of integers matching to defined tab names corresponding to indicate any badge count need to be specified |\n| onTabPress  | function - this returns the selected tab index  |\n| selectedIndex  | int - indicates the selected tab index corresponding to given values list  |\n| tabsContainerStyle  | int - radius of the container  |\n| tabBadgeContainerStyle  | object -  styles for view  |\n| activeTabBadgeContainerStyle  | object -  styles for view  |\n| tabBadgeStyle  | object -  styles for view  |\n| activeTabBadgeStyle  | object -  styles for view  |\n| borderRadius  | int - radius of the container |\n| tabStyle  | object -  styles for view  |\n| activeTabStyle | object -  styles for view |\n| tabTextStyle  | object -  styles for Text  |\n| activeTabTextStyle  | object -  styles for Text  |\n| height  | int -  height in number of pixels  |\n\n# Example\n\ncheckout sample directory and findout a react-native app.\nFirst run ``` npm install or yarn```\n\nthen run \n``` \nreact-native run-android  or  react-native run-ios\n```\n\nCreated by @ Chanaka Athurugiriya\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsath%2Freact-native-segment-controller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsath%2Freact-native-segment-controller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsath%2Freact-native-segment-controller/lists"}