{"id":4100,"url":"https://github.com/poberwong/react-native-switch-pro","last_synced_at":"2025-08-04T00:31:29.986Z","repository":{"id":13968080,"uuid":"75540923","full_name":"poberwong/react-native-switch-pro","owner":"poberwong","description":"a universal switch for android and iOS","archived":false,"fork":false,"pushed_at":"2024-03-21T11:49:26.000Z","size":3684,"stargazers_count":282,"open_issues_count":28,"forks_count":93,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-13T22:24:56.296Z","etag":null,"topics":[],"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/poberwong.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-12-04T14:02:01.000Z","updated_at":"2024-04-25T00:41:44.688Z","dependencies_parsed_at":"2024-04-25T00:41:36.690Z","dependency_job_id":"709823da-1650-4f7e-9b8a-f947d598332f","html_url":"https://github.com/poberwong/react-native-switch-pro","commit_stats":{"total_commits":80,"total_committers":14,"mean_commits":5.714285714285714,"dds":"0.36250000000000004","last_synced_commit":"29ea76963d24f68d1961407a42ada242b39f1c24"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poberwong%2Freact-native-switch-pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poberwong%2Freact-native-switch-pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poberwong%2Freact-native-switch-pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poberwong%2Freact-native-switch-pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/poberwong","download_url":"https://codeload.github.com/poberwong/react-native-switch-pro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228157672,"owners_count":17878314,"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.047Z","updated_at":"2024-12-07T07:31:07.215Z","avatar_url":"https://github.com/poberwong.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["UI"],"readme":"# react-native-switch-pro (2.0 is coming)\n[![version](https://img.shields.io/npm/v/react-native-switch-pro.svg)](https://www.npmjs.com/package/react-native-switch-pro) [![downloads](https://img.shields.io/npm/dm/react-native-switch-pro.svg?style=flat)](https://www.npmjs.com/package/react-native-switch-pro)\n[![downloads](https://img.shields.io/npm/dt/react-native-switch-pro.svg?style=flat)](https://www.npmjs.com/package/react-native-switch-pro)  \nA universal switch for android and iOS, it could be the best switch for react-native on Github.\n\n## Preview\n\u003cimg src=\"http://ww4.sinaimg.cn/large/005zU9b3jw1faioulkg79j30kq10wq3c.jpg\" width=\"340\" height=\"600\"/\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\u003cimg src=\"http://ww2.sinaimg.cn/large/005zU9b3jw1faioygbedfg30a90iejrd.gif\" width=\"340\" height=\"600\"/\u003e\n\n## Feature\n* Almost perfect switch on react-native\n* Have a good performance on both iOS and Android  \n* Add gesture with `PanResponder`  \n* More animations to follow iOS native performance\n* Support async and sync event\n* Support bidirectional data binding\n* Clear code style\n\n## Install\n`npm install react-native-switch-pro --save`\n\n## Usage\n* Sync  \n  \n```JavaScript\nimport Switch from 'react-native-switch-pro'\n...\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cSwitch onSyncPress={value =\u003e {...}}/\u003e\n      \u003c/View\u003e\n    )\n  }\n...\n```\n\n* Async  \n \n```JavaScript\n...\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cSwitch onAsyncPress={(callback) =\u003e {\n          You can call your async module and just invoke callback(true) when succeed,  \n          callback(false) when fail.\n        }}/\u003e\n      \u003c/View\u003e\n    )\n  }\n...\n```\n\n## Props\n Name | Description | Default | Type\n------|-------------|----------|-----------\nwidth | width of switch | 40 | number\nheight | height of switch | 21 | number\nvalue | state of switch which can be used to bidirectional binding | undefined | bool\ndisabled | whether switch is clickable | false | bool\ncircleColorActive | color for circle handler of switch when it is on | white | string\ncircleColorInactive | color for circle handler of switch when it is off | white | string\nstyle | styles that will be applied for switch container | undefined | style\ncircleStyle | styles that will be applied for the circle | undefined | style\nbackgroundActive | color of switch when it is on | green | string\nbackgroundInactive | color of switch when it is off | '#ddd' | string\nonSyncPress | callback when switch is clicked | () =\u003e null | func\nonAsyncPress | has a callback with result of async | (value, callback) =\u003e {callback(true)} | func\n\n## Notice\n* You'd better not use `onSyncPress` and `onAsyncPress` together or else, only `onSyncPress` will be invoked.\n* `value` is used with bidirectional binding which could be redux, state and so on.  \nIn `onAsyncPress`, you should write like following (with state):  \n\n\t```javascript\n\t\u003cSwitch\n\t  value={this.state.value}\n\t  onAsyncPress={(callback) =\u003e {\n\t    callback(false or true, value =\u003e this.setState({value}))\n     }}\n\t/\u003e\n\t```\n\t`value =\u003e this.setState({value})` will only be invoked when result is true.\n\n## License\n*MIT*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoberwong%2Freact-native-switch-pro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpoberwong%2Freact-native-switch-pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoberwong%2Freact-native-switch-pro/lists"}