{"id":18425243,"url":"https://github.com/react-native-segmented-control/segmented-control","last_synced_at":"2025-05-14T05:10:31.607Z","repository":{"id":37955804,"uuid":"169448934","full_name":"react-native-segmented-control/segmented-control","owner":"react-native-segmented-control","description":"React Native SegmentedControl library","archived":false,"fork":false,"pushed_at":"2024-12-11T01:38:22.000Z","size":3512,"stargazers_count":613,"open_issues_count":43,"forks_count":89,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-08T11:44:00.584Z","etag":null,"topics":["hacktoberfest","react-native","segmented-control"],"latest_commit_sha":null,"homepage":"","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/react-native-segmented-control.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-02-06T17:47:06.000Z","updated_at":"2025-05-06T06:35:28.000Z","dependencies_parsed_at":"2024-01-03T03:19:08.770Z","dependency_job_id":null,"html_url":"https://github.com/react-native-segmented-control/segmented-control","commit_stats":{"total_commits":227,"total_committers":30,"mean_commits":7.566666666666666,"dds":0.6740088105726872,"last_synced_commit":"af5b64cf5764a1fa5f56909b75e96dc22bbbb4d4"},"previous_names":["react-native-community/segmented-control","react-native-community/react-native-segmented-control"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-segmented-control%2Fsegmented-control","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-segmented-control%2Fsegmented-control/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-segmented-control%2Fsegmented-control/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-segmented-control%2Fsegmented-control/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-native-segmented-control","download_url":"https://codeload.github.com/react-native-segmented-control/segmented-control/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253343838,"owners_count":21893863,"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":["hacktoberfest","react-native","segmented-control"],"created_at":"2024-11-06T05:03:11.909Z","updated_at":"2025-05-14T05:10:31.551Z","avatar_url":"https://github.com/react-native-segmented-control.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# `@react-native-segmented-control/segmented-control`\n\n![Supports iOS and Android and Web][support-badge]![Github Action Badge][gha-badge] ![npm][npm-badge] [![Lean Core Extracted][lean-core-badge]][lean-core-issue]\n\nReact Native SegmentedControl library. Use SegmentedControl to render a UISegmentedControl iOS.\n\nFor Android and Web, it has a js implementation that mocks iOS 13 style of UISegmentedControl.\n\n| iOS                                                                                                                           | Android                                                                                                                       | Web                                                                                                                          |\n| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |\n| \u003cimg src=\"https://user-images.githubusercontent.com/6936373/71608757-dc6ef680-2bc6-11ea-85be-aa31f25ecf36.png\" width=\"320\" /\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/6936373/79550655-9edd9d00-80d3-11ea-98bf-8b7c0b0798d3.png\" width=\"320\" /\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/6936373/79590620-3f52b200-8112-11ea-863b-236c4465fba6.png\" width=\"640\"/\u003e |\n\n## Supported React Native Version\n\n| react-native-segmented-control | react-native |\n| ------------------------------ | ------------ |\n| v2.2.0                         | \u003e= 0.62      |\n| \u003c= v2.2.0                      | \u003e= 0.57      |\n\nThis module is NOT supported in the Expo Go app on iOS, because it requires custom native code. You need to use a custom development client or eject into bare workflow in order to use this module on iOS.\n\n## Getting started\n\nInstall the library using your package manager:\n\npnpm:\n\n```\npnpm install --save @react-native-segmented-control/segmented-control\n```\n\n\nyarn:\n\n```\nyarn add @react-native-segmented-control/segmented-control\n```\n\nnpm:\n\n```\nnpm install --save @react-native-segmented-control/segmented-control\n```\n\n## Link\n\n### React Native 0.60+\n\nThe package is [automatically linked](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) when building the app. All you need to do is:\n\n```sh\nnpx pod-install\n```\n\nFor android, no linking is needed, as the module is implemented in js.\n\n\u003cdetails\u003e\n   \u003csummary\u003eFor React Native version 0.59 or older\u003c/summary\u003e\n### React Native \u003c= 0.59\n\nrun `react-native link @react-native-segmented-control/segmented-control`\n\nor you can follow the instructions to [manually link this package](https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking).\n\n## Upgrading to React Native _0.60+_\n\nNew React Native comes with `autolinking` feature, which automatically links Native Modules in your project. In order to get it to work, make sure you unlink `Segmented Control` first:\n\n`react-native unlink @react-native-segmented-control/segmented-control`\n\n\u003c/details\u003e\n\n## Migrating from the core `react-native` module\n\nThis module was created when the segmentedControlIos was split out from the core of React Native. To migrate to this module you need to follow the installation instructions above and then change you imports from:\n\n```javascript\nimport {SegmentedControlIOS} from 'react-native';\n```\n\nto:\n\n```javascript\nimport SegmentedControl from '@react-native-segmented-control/segmented-control';\n```\n\n## Usage\n\nStart by importing the library:\n\nUse `SegmentedControl` to render a UISegmentedControl iOS.\n\n#### Programmatically changing selected index\n\nThe selected index can be changed on the fly by assigning the\nselectedIndex prop to a state variable, then changing that variable.\nNote that the state variable would need to be updated as the user\nselects a value and changes the index, as shown in the example below.\n\n```javascript\nimport SegmentedControl from '@react-native-segmented-control/segmented-control';\n\nreturn (\n  \u003cSegmentedControl\n    values={['One', 'Two']}\n    selectedIndex={this.state.selectedIndex}\n    onChange={(event) =\u003e {\n      this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});\n    }}\n  /\u003e\n);\n```\n\n---\n\n# Reference\n\n## Props\n\nInherits [View Props](view.md#props).\n\n### `enabled`\n\nIf false the user won't be able to interact with the control. Default value is true.\n\n| Type | Required |\n| ---- | -------- |\n| bool | No       |\n\n---\n\n### `momentary`\n\nIf true, then selecting a segment won't persist visually. The `onValueChange` callback will still work as expected.\n\n| Type | Required | Platform |\n| ---- | -------- | -------- |\n| bool | No       | iOS      |\n\n---\n\n### `onChange`\n\nCallback that is called when the user taps a segment; passes the event as an argument\n\n| Type     | Required |\n| -------- | -------- |\n| function | No       |\n\n---\n\n### `onValueChange`\n\nCallback that is called when the user taps a segment; passes the segment's value as an argument\n\n| Type     | Required |\n| -------- | -------- |\n| function | No       |\n\n---\n\n### `selectedIndex`\n\nThe index in `props.values` of the segment to be (pre)selected.\n\n| Type   | Required |\n| ------ | -------- |\n| number | No       |\n\n---\n\n### `tintColor`\n\nAccent color of the control.\n\n| Type   | Required |\n| ------ | -------- |\n| string | No       |\n\n---\n\n### `backgroundColor`\n\nBackground color color of the control. (iOS 13+ only)\n\n| Type   | Required | Supported Version |\n| ------ | -------- | ----------------- |\n| string | No       | iOS 13+           |\n\n---\n\n### `values`\n\nThe labels for the control's segment buttons, in order.\n\n| Type    | Required |\n| ------- | -------- |\n| (string | number   | Image)[] | No |\n\n### `appearance`\n\n(iOS 13+ only)\nOverrides the control's appearance irrespective of the OS theme\n\n| Type            | Required | Platform          |\n| --------------- | -------- | ----------------- |\n| 'dark', 'light' | No       | iOS, Android, Web |\n\n### `fontStyle`\n\n(iOS 13+ only)\n| Type | Required | Platform |\n| ------ | -------- | -------- |\n| object | No | iOS, Android, Web |\n\nAn object container\n\n- `color`: color of segment text\n- `fontSize`: font-size of segment text\n- `fontFamily`: font-family of segment text\n- `fontWeight`: font-weight of segment text\n\n### `activeFontStyle`\n\n(iOS 13+ only)\n| Type | Required | Platform |\n| ------ | -------- | -------- |\n| object | No | iOS, Android, Web |\n\n- `color`: overrides color of selected segment text\n- `fontSize`: overrides font-size of selected segment text\n- `fontFamily`: overrides font-family of selected segment text\n- `fontWeight`: overrides font-weight of selected segment text\n\n### `tabStyle`\n\n(Android and Web only) Styles the clickable surface which is responsible to change tabs\n| Type | Required | Platform |\n| ------ | -------- | -------- |\n| object | No | Android, Web |\n\nExtends [ViewStyles](https://reactnative.dev/docs/view-style-props)\n\n### `sliderStyle`\n\n(Android and Web only) Styles the slider component (Animated.View)\n| Type | Required | Platform |\n| ------ | -------- | -------- |\n| object | No | Android, Web |\n\nExtends [ViewStyles](https://reactnative.dev/docs/view-style-props)\n\n## Tips and Tricks\n\n### How can I increase the height of the tab ?\n\nFor android and IOS, simply pass `prop.style`:\n\n```json\n{\n  \"height\": number\n}\n```\n\nFor react-native-web, additionally pass :\n\n```json\n{\n  \"paddingVertical\": number,\n  or\n  \"height\": number\n}\n```\n\n### Adding padding makes text disappear on Android\n\nIf padding amount exceeds the fixed height of the container, it will shrink the text. So either increase the height or reduce your padding. \n\n## Maintainers\n\n- [M.Haris Baig](https://github.com/harisbaig100)\n- [Naturalclar](https://github.com/Naturalclar)\n\n## Contributing\n\nPlease see the [`contributing guide`](/CONTRIBUTING.md).\n\n## License\n\nThe library is released under the MIT licence. For more information see [`LICENSE`](/LICENSE).\n\n[gha-badge]: https://github.com/react-native-segmented-control/segmented-control/workflows/Build/badge.svg\n[npm-badge]: https://img.shields.io/npm/v/@react-native-segmented-control/segmented-control.svg?style=flat-square\n[lean-core-badge]: https://img.shields.io/badge/Lean%20Core-Extracted-brightgreen.svg?style=flat-square\n[lean-core-issue]: https://github.com/facebook/react-native/issues/23313\n[support-badge]: https://img.shields.io/badge/platforms-android%20|%20ios%20|%20web-lightgrey.svg?style=flat-square\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-segmented-control%2Fsegmented-control","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-native-segmented-control%2Fsegmented-control","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-segmented-control%2Fsegmented-control/lists"}