{"id":4115,"url":"https://github.com/wix-incubator/react-native-custom-segmented-control","last_synced_at":"2025-08-23T18:09:38.359Z","repository":{"id":51813915,"uuid":"58859403","full_name":"wix-incubator/react-native-custom-segmented-control","owner":"wix-incubator","description":"Custom version of the IOS SegmentedControl component","archived":false,"fork":false,"pushed_at":"2023-03-20T07:42:24.000Z","size":399,"stargazers_count":168,"open_issues_count":7,"forks_count":24,"subscribers_count":204,"default_branch":"master","last_synced_at":"2024-10-29T13:49:53.281Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","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/wix-incubator.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-05-15T12:03:53.000Z","updated_at":"2023-08-10T12:14:37.000Z","dependencies_parsed_at":"2024-04-25T00:41:19.327Z","dependency_job_id":"a95d2475-2c58-456d-bcd3-445513e8d9b4","html_url":"https://github.com/wix-incubator/react-native-custom-segmented-control","commit_stats":null,"previous_names":["wix/react-native-custom-segmented-control"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-native-custom-segmented-control","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-native-custom-segmented-control/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-native-custom-segmented-control/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wix-incubator%2Freact-native-custom-segmented-control/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wix-incubator","download_url":"https://codeload.github.com/wix-incubator/react-native-custom-segmented-control/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228686176,"owners_count":17957032,"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":[],"created_at":"2024-01-05T20:17:01.555Z","updated_at":"2024-12-19T21:09:29.167Z","avatar_url":"https://github.com/wix-incubator.png","language":"Objective-C","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"# react-native-custom-segmented-control\nNative UI component for Segmented Control with custom style\n\n`animationType: 'middle-line'`\n`selectedLineAlign: 'text'`\n`selectedLineMode: 'full'`\n![Screenshots](images/my_segmented1.gif)\n\n`animationType: 'open-and-close'`\n`selectedLineAlign: 'text'`\n`selectedLineMode: 'text'`\n![Screenshots](images/my_segmented6.gif)\n\n`animationType: 'middle-line'`\n`selectedLineAlign: 'bottom'`\n`selectedLineMode: 'text'`\n![Screenshots](images/my_segmented3.gif)\n\n`animationType: 'middle-line'`\n`selectedLineAlign: 'top'`\n`selectedLineMode: 'full'`\n![Screenshots](images/my_segmented4.gif)\n\n`animationType: 'middle-line'`\n`selectedLineAlign: 'top'`\n`selectedLineMode: 'full'`\n![Screenshots](images/my_segmented5.gif)\n\n`animationType: 'middle-line'`\n`selectedLineAlign: 'text'`\n`selectedLineMode: 'text'`\n![Screenshots](images/my_segmented2.gif)\n\n## Installation\n\n- Install using `npm`:\n\n\t```\n\tnpm install react-native-custom-segmented-control --save\n\t```\n\n- Locate the module lib folder in your node modules:\n\t`PROJECT_DIR/node_modules/react-native-custom-segmented-control/lib`.\n\n- Drag the `CustomSegmentedControl.xcodeproj` project file into your project\n\n- Add `libCustomSegmentedControl.a` to your target's **Linked Frameworks and Libraries**.\n\n## How To Use\nRequire the native component:\n\n```js\nimport {CustomSegmentedControl} from 'react-native-custom-segmented-control'\n```\n\nNow use it in your jsx inside your `View`:\n\n```jsx\n\u003cCustomSegmentedControl \n\tstyle={{\n\t\tflex:1,\n\t\tbackgroundColor: 'white',\t\n\t\tmarginVertical: 8\n\t}}\n\ttextValues={['ORDERS','PRODUCTS' ]}\n\tselected={0}\n\tsegmentedStyle={{\n\t\tselectedLineHeight: 2,\n\t\tfontSize:17,\n\t\tfontWeight: 'bold', // bold, italic, regular (default)\n\t\tsegmentBackgroundColor: 'transparent',\n\t\tsegmentTextColor: '#7a92a5',\n\t\tsegmentHighlightTextColor: '#7a92a599',\n\t\tselectedLineColor: '#00adf5',\n\t\tselectedLineAlign: 'bottom', // top/bottom/text\n\t\tselectedLineMode: 'text', // full/text\n\t\tselectedTextColor: 'black',                                                  \n\t\tselectedLinePaddingWidth: 30,\n\t\tsegmentFontFamily: 'system-font-bold'\n\t}}\n\tanimation={{\n\t\tduration: 0.7,\n\t\tdamping: 0.5,\n\t\tanimationType: 'middle-line',\n\t\tinitialDampingVelocity: 0.4\n\t}}\n\tonSelectedWillChange={(event)=\u003e {\n\t}}\n\tonSelectedDidChange={(event)=\u003e {\n\t}}\n/\u003e\n```\n\n##Properties\n\nAttribute | Description\n-------- | -----------\ntextValues | [Array] Array of strings which will be presented on the segmented control\nselected | [int] The selected segment\nonSelectedWillChange | [function] callback function will be called **before** the selected animation will take place\nonSelectedDidChange | [function] callback function will be called **after** the selected animation will take place\nanimation | [Object] see [Animation Properties](README.md#animation-properties)\nsegmentedStyle | [Object] see [Segmented Style Properties](README.md#segmented-style-properties)\n\n                                                 \n##Segmented Style Properties\nAttribute | Description\n--------- | -----------\nselectedLineHeight | [float] The selected line height. Default is 2\nfontSize | [float] The segmented control text font size. Default is 14\nsegmentBackgroundColor | [Color] The segmented control background color. Default is `'black'`\nsegmentTextColor | [Color] The segmented control text color. Default is system default (blue)\nselectedTextColor | [Color] The selected segment color\nsegmentHighlightTextColor | [Color] The segmnet highlight color. Default is black with alpha 0.5\nsegmentFontFamily | [Font/`'system-font-bold'`/`'system-font'`] The segmented control font. Default is `system-font` default\nselectedLineColor | [Color] The selected line color. Default is 'black'\nselectedLineAlign | [`'top'`/`'bottom'`/`'text'`] The selected line vertical alignment. Defualt is `'text'`\nselectedLineMode | [`'full'`/`'text'`] The selected line mode. For determine if the line will be text width of full button width. Default is `'text'`\nselectedLinePaddingWidth | [float] The selected line width padding. Default is 2\n\n\n\n##Animation Properties\n \nAttribute | Description\n--------- | -----------\nduration | [float] The animation duration. Default is 0.2 sec\ndamping | [float] The damping ratio for the spring animation. Default is 0 (no damping)\nanimationType | [`'default'`, `'middle-line'`, `'close-and-open'`] The transition animation type. Default is `'default'`\ninitialDampingVelocity | (float) The initial damping velocity. Default is 0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix-incubator%2Freact-native-custom-segmented-control","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwix-incubator%2Freact-native-custom-segmented-control","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwix-incubator%2Freact-native-custom-segmented-control/lists"}