Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-native-switch-toggle
Advanced tools
Highly customizable animating react native switch toggle component.
Simple switch toggle component for react-native. This component supports horizontal switch toggle with animation with several options like start/end background colors, start/end circle colors, and duration for animation.
Current package is fully redesigned in 2.0.0
. We recommend you to use this package version >=2.0.0
.
Do you enjoy using react-native-switch-toggle
? Then think about using dooboo-ui which is our ui integrated ilbrary. It included SwitchToggle
from 0.1.6
.
yarn add doobo-ui
necessary | types | default | |
---|---|---|---|
switchOn | ✓ | boolean | false |
onPress | ✓ | func | () => {} |
containerStyle | styles | { width: 80, height: 40, borderRadius: 25 ... } | |
circleStyle | styles | { width: 32, height: 32, borderRadius: 16 ... } | |
backgroundColorOn | string | 'black' | |
backgroundColorOff | string | '#C4C4C4' | |
circleColorOn | string | 'white' | |
circleColorOff | string | '#C4C4C4' | |
duration | number | 300 | |
type | number | 0 - Normal switch, 1 - Switch with a text | |
buttonText | string | Text on-top of the button | |
backTextRight | string | Text to appear in right side when button toggled to left | |
backTextLeft | string | Text to appear in left side when button toggled to right | |
buttonTextStyle | styles | Styles for text on the button | |
textRightStyle | styles | Styles for text in right | |
textLeftStyle | styles | Styles for text in left | |
buttonStyle | styles | Styles for the button | |
buttonContainerStyle | styles | Styles for button container | |
rightContainerStyle | styles | Styles for right text container | |
leftContainerStyle | styles | Styles for left text container |
$ npm install react-native-switch-toggle --save
import SwitchToggle from "react-native-switch-toggle";
<SwitchToggle switchOn={on} onPress={() => off(!on)} />
<SwitchToggle
switchOn={on}
onPress={() => off(!on)}
circleColorOff='#C4C4C4'
circleColorOn='#00D9D5'
backgroundColorOn='#6D6D6D'
backgroundColorOff='#C4C4C4'
/>
<SwitchToggle
switchOn={on}
onPress={() => off(!on)}
containerStyle={{
marginTop: 16,
width: 106,
height: 48,
borderRadius: 25,
padding: 5,
}}
circleStyle={{
width: 40,
height: 40,
borderRadius: 20,
}}
/>
FAQs
Highly customizable animating react native switch toggle component.
The npm package react-native-switch-toggle receives a total of 2,384 weekly downloads. As such, react-native-switch-toggle popularity was classified as popular.
We found that react-native-switch-toggle demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.