React Native Switch Toggles 🔥

!platforms

A simple and customizable React Native switch component.

Demo

❤️ Try on Expo Snack


Prerequisites

⚠️ Peer Dependencies

* react-native-reanimated-v2

This component has a peer dependency on react-native-reanimated-v2. react-native-reanimated-v2 has to be installed and linked into your project.
Follow react-native-reanimated-v2 to install the dependency.

Installation

Supported version: react-native >= 0.59.0

``bash
npm install react-native-switch-toggles
`

or

`bash
yarn add react-native-switch-toggles
`



Example


`jsx
import Switch from 'react-native-switch-toggles';

const [isEnabled, setIsEnabled] = React.useState(false);
....

size={50}
value={isEnabled}
onChange={(value) => setIsEnabled(value)}
renderOffIndicator={() => 🌚}
renderOnIndicator={() => 🌝}
/>

size={50}
value={isEnabled}
onChange={(value) => setIsEnabled(value)}
activeTrackColor={"#45D058"}
renderOffIndicator={() => OFF}
renderOnIndicator={() => ON}
/>

`
![](examples/demo.gif)

`jsx
import Switch from 'react-native-switch-toggles';


const [isEnabled, setIsEnabled] = React.useState(false);
....

<>
Simple Switch
value={isEnabled}
onChange={(value) => setIsEnabled(value)}
/>



<>
Switch with on/off indicator
value={isEnabled}
onChange={(value) => setIsEnabled(value)}
activeTrackColor={'#45D058'}
renderOffIndicator={() => (
OFF
)}
renderOnIndicator={() => (
ON
)}
/>



<>
Switch with on/off thumb indicator
size={40}
value={isEnabled}
onChange={(value) => setIsEnabled(value)}
activeTrackColor={'#6ab04c'}
renderInactiveThumbIcon={() => (
💩
)}
renderActiveThumbIcon={() => (
🔥
)}
/>



<>

Switch with on/off thumb/track indicator

size={40}
value={isEnabled}
onChange={(value) => setIsEnabled(value)}
activeTrackColor={'#6ab04c'}
inactiveTrackColor={'#eb4d4b'}
renderInactiveThumbIcon={() => (
💩
)}
renderActiveThumbIcon={() => (
🔥
)}
renderOffIndicator={() => (
OFF
)}
renderOnIndicator={() => (
ON
)}
/>



<>
Big switch
size={60}
value={isEnabled}
onChange={(value) => setIsEnabled(value)}
activeTrackColor={'#4b7bec'}
inactiveTrackColor={'#ff7f50'}
renderInactiveThumbIcon={() => (
💩
)}
renderActiveThumbIcon={() => (
🔥
)}
renderOffIndicator={() => (
OFF
)}
renderOnIndicator={() => (
ON
)}
/>



<>
Big switch with thumb color
size={60}
value={isEnabled}
onChange={(value) => setIsEnabled(value)}
activeThumbColor={'#f9ca24'}
inactiveThumbColor={'#6ab04c'}
activeTrackColor={'#6ab04c'}
inactiveTrackColor={'#ffffff'}
renderInactiveThumbIcon={() => (
💩
)}
renderActiveThumbIcon={() => (
🔥
)}
renderOffIndicator={() => (
OFF
)}
renderOnIndicator={() => (
ON
)}
/>


``

Props

| Prop | Description | Type | Default Value | Required |
| :--------------------------:|:--------------------------------------------------------------------------------------|:-----------------------------:|:--------------------------:|:---------:|
| value | switch on/off state value | Boolean | | true |
| onChange | callback on switch value change | Function | (value: boolean) => void; | true |
| size | size of the switch component | Number | 25 | false |
| disabled | enable/disable switch | Boolean | false | false |
| activeTrackColor | track color when switch value is true | String | "rgba(255,255,255,0.6)" | false |
| inactiveTrackColor | track color when switch value is false | String | "rgba(0,0,0,0.2)" | false |
| activeThumbColor | thumb color when switch value is true | String | "#ffffff" | false |
| inactiveThumbColor | thumb color when switch value is false | String | "#ffffff" | false |
| renderOnIndicator | render a custom view on switch track when the switch value is true | Function | () => null | false |
| renderOffIndicator | render a custom view on switch track when the switch value is false | Function | () => null | false |
| renderActiveThumbIcon | render a custom view on switch thumb when the switch value is true | Function | () => null | false |
| renderInactiveThumbIcon | render a custom view on switch thumb when the switch value is false | Function | () => null | false |

License

This project is licenced under the MIT License.