{"id":13679085,"url":"https://github.com/Karthik-B-06/react-native-segmented-control","last_synced_at":"2025-04-29T16:30:57.051Z","repository":{"id":37775267,"uuid":"278844420","full_name":"Karthik-B-06/react-native-segmented-control","owner":"Karthik-B-06","description":"🎉 React Native Segmented Control 🎮  for both iOS, Android and Web","archived":false,"fork":false,"pushed_at":"2023-03-30T02:35:18.000Z","size":34107,"stargazers_count":289,"open_issues_count":26,"forks_count":32,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-21T23:37:12.456Z","etag":null,"topics":["react-native","segmented-control","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/rn-segmented-control","language":"TypeScript","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/Karthik-B-06.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}},"created_at":"2020-07-11T11:03:51.000Z","updated_at":"2025-04-10T18:57:20.000Z","dependencies_parsed_at":"2024-01-14T14:55:47.968Z","dependency_job_id":"2312ad29-50a6-4278-b430-c342825642d9","html_url":"https://github.com/Karthik-B-06/react-native-segmented-control","commit_stats":{"total_commits":50,"total_committers":3,"mean_commits":"16.666666666666668","dds":"0.43999999999999995","last_synced_commit":"65041ee19443ec1c9f1ba7e73f7387207f11cb83"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Karthik-B-06%2Freact-native-segmented-control","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Karthik-B-06%2Freact-native-segmented-control/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Karthik-B-06%2Freact-native-segmented-control/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Karthik-B-06%2Freact-native-segmented-control/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Karthik-B-06","download_url":"https://codeload.github.com/Karthik-B-06/react-native-segmented-control/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251540072,"owners_count":21605840,"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":["react-native","segmented-control","typescript"],"created_at":"2024-08-02T13:01:01.798Z","updated_at":"2025-04-29T16:30:52.036Z","avatar_url":"https://github.com/Karthik-B-06.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eReact Native Segmented Control\u003c/h1\u003e\n\n![npm](https://badgen.net/badge/license/MIT/blue)\n[![npm](https://badgen.net/npm/dt/rn-segmented-control)](https://www.npmjs.com/package/rn-segmented-control)\n[![npm](https://badgen.net/npm/v/rn-segmented-control)](https://www.npmjs.com/package/rn-segmented-control)\n[![](https://badgen.net/npm/types/tslib)](https://badgen.net/npm/types/tslib)\n\n![SegmentedControl](https://user-images.githubusercontent.com/35562287/149650171-3cd9c972-6cf5-4aef-989f-199820d5b0e6.gif)\nReact Native Segmented Control for both iOS, Android and Web 😎\n\n\u003c/div\u003e\n\n## :anchor: Installation\n\n```sh\nnpm install rn-segmented-control\n```\n\n```sh\nyarn add rn-segmented-control\n```\n\n## :arrows_counterclockwise: Dependencies\n\nMake sure you have [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs) and [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) installed and configured.\n\n## :wrench: Props\n\n| Name                    | Description                                    | Required | Type      | Default  |\n| ----------------------- | ---------------------------------------------- | -------- | --------- | -------- |\n| segments                | An array of labels for segments                | YES      | Array     | []       |\n| currentIndex            | Index for the currently active segment         | YES      | Number    | 0        |\n| onChange                | A callback Function with pressed segment index | YES      | Function  | () =\u003e {} |\n| badgeValues             | An array of badge value for segments.          | NO       | Array     | []       |\n| isRTL                   | Controls the toggle animation direction        | NO       | Boolean   | false    |\n| containerMargin         | The value used to determine the width          | NO       | Number    | 16       |\n| activeTextStyle         | active text styles                             | NO       | TextStyle | {}       |\n| inactiveTextStyle       | inactive text styles.                          | NO       | TextStyle | {}       |\n| segmentedControlWrapper | Style object for the Segmented Control.        | NO       | ViewStyle | {}       |\n| pressableWrapper        | Style object for the Pressable Container       | NO       | ViewStyle | {}       |\n| tileStyle               | Style object for the Absolute positioned tile  | NO       | ViewStyle | {}       |\n| activeBadgeStyle        | Active Badge Style                             | NO       | ViewStyle | {}       |\n| inactiveBadgeStyle      | Inactive Badge Style                           | NO       | ViewStyle | {}       |\n| badgeTextStyle          | Badge text styles                              | NO       | TextStyle | {}       |\n\n\u003e :warning: all View styles or Text Styles passed as props overrides some default styles provided by the package. Make sure you use it properly :)\n\n\u003e :information_source: To apply your own `shadowStyles` use the tileStyle prop\n\n## :mag: Usage\n\n```tsx\nimport SegmentedControl from 'rn-segmented-control';\n\nimport * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport SegmentedControl from './SegmentedControl';\n\nexport default function App() {\n  const [tabIndex, setTabIndex] = React.useState(0);\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cView style={styles.box}\u003e\n        \u003cSegmentedControl\n          containerMargin={16}\n          segments={['Label 1', 'Label 2']}\n          onChange={(index) =\u003e setTabIndex(index)}\n          currentIndex={tabIndex}\n        /\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n  box: {\n    marginHorizontal: 16,\n    marginVertical: 16,\n  },\n});\n```\n\n### Working Examples\n\nCheck the expo example app [here](https://github.com/Karthik-B-06/react-native-segmented-control/tree/main/example).\n\n## :iphone: iOS and Android working Example.\n\n![SegmentedControl](https://user-images.githubusercontent.com/35562287/149624111-2b3d1f7f-a685-404a-a167-f7020706880d.gif)\n\n## :desktop_computer: Web\n\n![DesktopExample](https://user-images.githubusercontent.com/35562287/149624298-c415d1cc-5f65-4e44-8efb-02a9e0f96dbb.gif)\n\n## :v: Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## :man: Author\n\n[Karthik B](https://twitter.com/_iam_karthik)\n\n## :clipboard: License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKarthik-B-06%2Freact-native-segmented-control","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKarthik-B-06%2Freact-native-segmented-control","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKarthik-B-06%2Freact-native-segmented-control/lists"}