{"id":51705544,"url":"https://github.com/mymai91/react-native-toggle-element","last_synced_at":"2026-07-16T15:11:44.894Z","repository":{"id":51647290,"uuid":"259842488","full_name":"mymai91/react-native-toggle-element","owner":"mymai91","description":"Switch toggle component for React Native. You can add title, icon, modify component for toggle button.","archived":false,"fork":false,"pushed_at":"2024-10-30T10:08:45.000Z","size":2139,"stargazers_count":171,"open_issues_count":7,"forks_count":18,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-30T10:29:12.242Z","etag":null,"topics":["toggle","toggle-switches","togglebutton","trackbar-style"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-toggle-element","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/mymai91.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"publiccode":null,"codemeta":null},"funding":{"github":["mymai91"],"patreon":null,"open_collective":null,"ko_fi":"mymai","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-04-29T06:24:07.000Z","updated_at":"2024-10-30T10:02:02.000Z","dependencies_parsed_at":"2024-06-18T18:36:21.602Z","dependency_job_id":"39acd9f4-edbc-43ec-a838-bfa95982c875","html_url":"https://github.com/mymai91/react-native-toggle-element","commit_stats":{"total_commits":19,"total_committers":3,"mean_commits":6.333333333333333,"dds":0.1578947368421053,"last_synced_commit":"15290493221d5c8f94c5097e5d83284a7b9051aa"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mymai91/react-native-toggle-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mymai91%2Freact-native-toggle-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mymai91%2Freact-native-toggle-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mymai91%2Freact-native-toggle-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mymai91%2Freact-native-toggle-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mymai91","download_url":"https://codeload.github.com/mymai91/react-native-toggle-element/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mymai91%2Freact-native-toggle-element/sbom","scorecard":{"id":670932,"data":{"date":"2025-08-11","repo":{"name":"github.com/mymai91/react-native-toggle-element","commit":"0bdfb27319f07f327650ff9f81a4092756911f5d"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":1,"reason":"Found 3/22 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":9,"reason":"binaries present in source code","details":["Warn: binary detected: examples/react-native/android/gradle/wrapper/gradle-wrapper.jar:1"],"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 4 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"36 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg","Warn: Project is vulnerable to: GHSA-crh6-fp67-6883","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-f5x2-xv93-4p23","Warn: Project is vulnerable to: GHSA-gmpm-xp43-f7g6","Warn: Project is vulnerable to: GHSA-pf27-929j-9pmm","Warn: Project is vulnerable to: GHSA-327c-qx3v-h673","Warn: Project is vulnerable to: GHSA-x4cf-6jr3-3qvp","Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw","Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-21T20:00:31.947Z","repository_id":51647290,"created_at":"2025-08-21T20:00:31.947Z","updated_at":"2025-08-21T20:00:31.947Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35548214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-16T02:00:06.687Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["toggle","toggle-switches","togglebutton","trackbar-style"],"created_at":"2026-07-16T15:11:43.827Z","updated_at":"2026-07-16T15:11:44.886Z","avatar_url":"https://github.com/mymai91.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mymai91","https://ko-fi.com/mymai"],"categories":[],"sub_categories":[],"readme":"# React-Native-Toggle-Element 2.1.1 [![CircleCI](https://circleci.com/gh/mymai91/react-native-toggle-element.svg?style=svg)](https://circleci.com/gh/mymai91/react-native-toggle-element)\n\nThe library has been rewritten with Typescript support in version `2.0.0`. This library will work well on both React Native and Expo, please check out the examples folder.\n\nThe latest version is `2.1.1`\n\n- React will stop supporting `defaultProps` in major releases, so the react-native-toggle-element no longer uses it in this version.\n\n![ezgif com-video-to-gif (7)](https://user-images.githubusercontent.com/6791942/80718297-8edea800-8b2c-11ea-8f69-c7c3f98ca545.gif)\n\n![toggle](https://user-images.githubusercontent.com/6791942/80785013-854b5380-8bb1-11ea-9c7a-8b8975381642.gif)\n\n## Installation\n\n```bash\nyarn add react-native-toggle-element\n\n# or with npm\n\nnpm install react-native-toggle-element\n```\n\n## Usage\n\n### Init value\n\n```jsx\nimport React, { useState } from \"react\";\nimport Toggle from \"react-native-toggle-element\";\n\nconst [toggleValue, setToggleValue] = useState(false);\n```\n\n### Toggle with default components\n\n![toggle-no-content](https://user-images.githubusercontent.com/6791942/80714462-8c2d8400-8b27-11ea-996d-65fc4bae7673.gif)\n\n```jsx\n\u003cToggle value={toggleValue} onPress={(val) =\u003e setToggleValue(val)} /\u003e\n```\n\n### Toggle with left title\n\n![toggle-with-left-content](https://user-images.githubusercontent.com/6791942/80714954-3dccb500-8b28-11ea-8039-625695eb6aa4.gif)\n\n```jsx\n\u003cToggle\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  leftTitle=\"On\"\n/\u003e\n```\n\n### Toggle with right title\n\n![toggle-with-right-content](https://user-images.githubusercontent.com/6791942/80715454-f692f400-8b28-11ea-80e1-d466496a9629.gif)\n\n```jsx\n\u003cToggle\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  leftTitle=\"Right\"\n/\u003e\n```\n\n### Toggle with left title and right Title\n\n![toggle-left-right-title](https://user-images.githubusercontent.com/6791942/80715737-61442f80-8b29-11ea-9c15-c0403b040b33.gif)\n\n```jsx\n\u003cToggle\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  leftTitle=\"Left\"\n  rightTitle=\"Right\"\n/\u003e\n```\n\n### Toggle with custom left component\n\n![toggle-left-component](https://user-images.githubusercontent.com/6791942/80716248-0101bd80-8b2a-11ea-8d2c-57fee6dccc42.gif)\n\n```jsx\n\u003cToggle\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  leftComponent={\u003cIcon name=\"credit\" width=\"30\" height=\"30\" fill={\"#3BD2B5\"} /\u003e}\n/\u003e\n```\n\n### Toggle with custom right component\n\n![ezgif com-video-to-gif](https://user-images.githubusercontent.com/6791942/80716446-3b6b5a80-8b2a-11ea-9447-96631e308ce7.gif)\n\n```jsx\n\u003cToggle\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  rightComponent={\u003cIcon name=\"plus\" width=\"30\" height=\"30\" fill={\"#3BD2B5\"} /\u003e}\n/\u003e\n```\n\n### Toggle with mixed left \u0026 right components\n\n![ezgif com-video-to-gif (1)](https://user-images.githubusercontent.com/6791942/80716660-81c0b980-8b2a-11ea-988d-10a7ec98c18e.gif)\n\n```jsx\n\u003cToggle\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  disabled\n  leftComponent={\n    \u003cIcon name=\"credit\" width=\"30\" height=\"30\" fill={Colors.tabIconSelected} /\u003e\n  }\n  rightComponent={\n    \u003cIcon name=\"plus\" width=\"30\" height=\"30\" fill={Colors.tabIconSelected} /\u003e\n  }\n/\u003e\n```\n\n### Toggle with thumb button components\n\n![toggle](https://user-images.githubusercontent.com/6791942/80785013-854b5380-8bb1-11ea-9c7a-8b8975381642.gif)\n\n```jsx\n\u003cToggle\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  thumbActiveComponent={\n    \u003cIcon name=\"sun\" width=\"40\" height=\"40\" fill={\"#3BD2B5\"} /\u003e\n  }\n  thumbInActiveComponent={\n    \u003cIcon name=\"night\" width=\"40\" height=\"40\" fill={\"#03452C\"} /\u003e\n  }\n  trackBar={{\n    activeBackgroundColor: \"#9ee3fb\",\n    inActiveBackgroundColor: \"#3c4145\",\n    borderActiveColor: \"#86c3d7\",\n    borderInActiveColor: \"#1c1c1c\",\n    borderWidth: 5,\n    width: 100,\n  }}\n/\u003e\n```\n\n### Disabled Toggle\n\n![ezgif com-video-to-gif (3)](https://user-images.githubusercontent.com/6791942/80717417-7d48d080-8b2b-11ea-8e5b-de57801eeba2.gif)\n\n```jsx\n\u003cToggle\n  disabled\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  leftTitle=\"Left\"\n  rightTitle=\"Right\"\n/\u003e\n```\n\n## Modify style\n\n### Modify TrackBar Size\n\n![ezgif com-video-to-gif (5)](https://user-images.githubusercontent.com/6791942/80717739-cbf66a80-8b2b-11ea-8651-1e95b43f9cce.gif)\n\n```jsx\n\u003cToggle\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  leftTitle=\"Left\"\n  rightTitle=\"Right\"\n  trackBar={{\n    width: 200,\n    height: 50,\n    radius: 25,\n  }}\n/\u003e\n```\n\n### Modify TrackBar Style\n\n**TrackBarStyle will override Border active color \u0026 Border inactive color**\n\n![ezgif com-video-to-gif (6)](https://user-images.githubusercontent.com/6791942/80718009-2c85a780-8b2c-11ea-8f61-9b2f76ad3f6b.gif)\n\n```jsx\n\u003cToggle\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  trackBarStyle={{\n    borderColor: \"green\",\n  }}\n  trackBar={{\n    borderWidth: 2,\n  }}\n/\u003e\n```\n\n### Modify ThumbButton\n\n![ezgif com-video-to-gif (7)](https://user-images.githubusercontent.com/6791942/80718297-8edea800-8b2c-11ea-8f69-c7c3f98ca545.gif)\n\n```jsx\n\u003cToggle\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  leftTitle=\"Left\"\n  rightTitle=\"Right\"\n  thumbButton={{\n    width: 60,\n    height: 60,\n    radius: 30,\n  }}\n/\u003e\n```\n\n### Modify Disabled Toggle\n\n![ezgif com-video-to-gif (8)](https://user-images.githubusercontent.com/6791942/80718502-ce0cf900-8b2c-11ea-9d2a-e4748a180516.gif)\n\n```jsx\n\u003cToggle\n  disabled\n  disabledTitleStyle={{ color: \"red\" }}\n  disabledStyle={{ backgroundColor: \"gray\", opacity: 0.3 }}\n  value={toggleValue}\n  onPress={(newState) =\u003e setToggleValue(newState)}\n  leftTitle=\"Left\"\n  rightTitle=\"Right\"\n/\u003e\n```\n\n## Props\n\n- containerStyle\n- disabled\n- disabledStyle\n- disabledTitleStyle\n- leftComponent\n- leftTitle\n- rightComponent\n- rightTitle\n- thumbActiveComponent\n- thumbInActiveComponent\n- thumbStyle\n- thumbButton\n- trackBar\n- trackBarStyle\n- animationDuration\n\n## Reference\n\n![Untitled_Artwork 2](https://user-images.githubusercontent.com/6791942/80615032-c3d9f480-8a71-11ea-8b46-94d37ed5dd62.png)\n\n| Type                       | Default |\n| -------------------------- | :-----: |\n| React element or component |  none   |\n\n`containerStyle` style for main container\n\n| Type  | Default |\n| ----- | :-----: |\n| style |  none   |\n\n`disabled` disable the Toggle Button component (optional)\n\n| Type    | Default |\n| ------- | :-----: |\n| boolean |  false  |\n\n`disabledStyle` styling for Toggle Button Component for disabled (optional)\n\n| Type                | Default |\n| ------------------- | :-----: |\n| View style (object) |  none   |\n\n`disabledTitleStyle` styling for **leftTitle \u0026 right Title**(optional) when Toggle Button set with status is disabled(optional). If you want to set disable style for Active \u0026 Inactive you should use custom left component or custom right component\n\n| Type                 | Default |\n| -------------------- | :-----: |\n| Text style (object)) |  none   |\n\n`leftComponent` define your left component here\n\n| Type                       | Default |\n| -------------------------- | :-----: |\n| React element or component |  none   |\n\n`leftTitle` button left title (optional)\n\n| Type   | Default |\n| ------ | :-----: |\n| string |  none   |\n\n`rightComponent` define your right component here (optional)\n\n| Type                       | Default |\n| -------------------------- | :-----: |\n| React element or component |  none   |\n\n`rightTitle` button right title (optional)\n\n| Type   | Default |\n| ------ | :-----: |\n| string |  none   |\n\n`thumbActiveComponent` define your thumb button component when status is active (optional)\n\n| Type                       | Default |\n| -------------------------- | :-----: |\n| React element or component |  none   |\n\n`thumbInActiveComponent` define your thumb button component when status is inactive (optional)\n\n| Type                       | Default |\n| -------------------------- | :-----: |\n| React element or component |  none   |\n\n`thumbStyle` thumb button style (optional). Styling will override the value from **thumbButton** props\n\n| Type                | Default |\n| ------------------- | :-----: |\n| View style (object) |  none   |\n\n`thumbButton` define to change size and radius and color depend on active / inactive status (optional)\n\n| Type                    | Default |\n| ----------------------- | :-----: |\n| borderWidth             |    0    |\n| width                   |   50    |\n| height                  |   50    |\n| radius                  |   25    |\n| activeBackgroundColor   | #fde2e2 |\n| inActiveBackgroundColor | #ffb6b6 |\n\n`trackBar` define to change size and radius and color depend on active / inactive status (optional)\n\n| Type                    |   Default   |\n| ----------------------- | :---------: |\n| borderWidth             |      0      |\n| width                   |     50      |\n| height                  |     50      |\n| radius                  |     25      |\n| activeBackgroundColor   |   #fde2e2   |\n| inActiveBackgroundColor |   #ffb6b6   |\n| borderActiveColor       | transparent |\n| borderInActiveColor     | transparent |\n\n`trackBarStyle` trackbar style (optional). Styling will override the value from **trackBar** props\n\n| Type                | Default |\n| ------------------- | :-----: |\n| View style (object) |  none   |\n\n`animationDuration` duration of the thumb button animation (optional).\n\n| Type   | Default |\n| ------ | :-----: |\n| number |   350   |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmymai91%2Freact-native-toggle-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmymai91%2Freact-native-toggle-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmymai91%2Freact-native-toggle-element/lists"}