Toggle Switch Component for react native, it works on Android, iOS and Web (react-native-web).
-
- Run
npm i toggle-switch-react-native --save
- Run
-
import ToggleSwitch from 'toggle-switch-react-native'
To Get Started, Import toggle-switch-react-native to your js file.
import ToggleSwitch from 'toggle-switch-react-native'
Inside your component's render method, or any other method returning views, use ToggleSwitch:
<ToggleSwitch
isOn={false}
onColor="green"
offColor="red"
label="Example label"
labelStyle={{ color: "black", fontWeight: "900" }}
size="large"
onToggle={isOn => console.log("changed to : ", isOn)}
/>| Props | Type | Optional | Default | Description |
|---|---|---|---|---|
| isOn | Boolean | true | 'false' | Default state, true for On, false for off |
| onColor | String | true | '#634fc9' | On Color |
| offColor | String | true | '#ecf0f1' | Off Color |
| label | String | true | Custom Label Text on the Left of the toggle Button | |
| labelStyle | Object, StyleSheet | true | {marginHorizontal: 10} | Custom Styling for the Label Text View |
| thumbOnStyle | Object, StyleSheet | true | null | Custom Styling for the On Thumb |
| thumbOffStyle | Object, StyleSheet | true | null | Custom Styling for the Off Thumb |
| trackOnStyle | Object, StyleSheet | true | null | Custom Styling for the On Track |
| trackOffStyle | Object, StyleSheet | true | null | Custom Styling for the Off Track |
| size | String | true | 'medium' | Size of the toggle switch button ( 'large', 'medium', 'small') |
| icon | React Component | true | null | Icon for the toggle. Can be any React Component considerate of size |
| onToggle | Function Callback | false | none | Callback when the toggle switch component changes the state, params: isOn |
| disabled | Boolean | true | 'false' | Disable toggling the component |
| animationSpeed | Number | true | 300 | Speed of the toggle animation |
If you encountered an Issue, please add a screenshot of the bug or a code snippet.
Quickest way to solve issue is to reproduce it on the example project
Pull requests are welcome. If you want to change the API or imporove something, feel free to create an issue and discuss it first.
MIT Licensed
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent