React Native Switch Toggles 🔥

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

npm install react-native-switch-toggles

or

yarn add react-native-switch-toggles

Example

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


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

<Switch
  size={50}
  value={isEnabled}
  onChange={(value) => setIsEnabled(value)}
  renderOffIndicator={() => <Text style={{ fontSize: 16, color: 'white' }}>🌚</Text>}
  renderOnIndicator={() => <Text style={{ fontSize: 16, color: 'white' }}>🌝</Text>}
/>

<Switch
  size={50}
  value={isEnabled}
  onChange={(value) => setIsEnabled(value)}
  activeTrackColor={"#45D058"}
  renderOffIndicator={() => <Text style={{ fontSize: 16, color: 'white' }}>OFF</Text>}
  renderOnIndicator={() => <Text style={{ fontSize: 16, color: 'white' }}>ON</Text>}
/>

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


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

<>
  <Text style={styles.label}>Simple Switch</Text>
  <Switch
    value={isEnabled}
    onChange={(value) => setIsEnabled(value)}
  />
</>


<>
  <Text style={styles.label}>Switch with on/off indicator</Text>
  <Switch
    value={isEnabled}
    onChange={(value) => setIsEnabled(value)}
    activeTrackColor={'#45D058'}
    renderOffIndicator={() => (
      <Text style={{ fontSize: 8, color: 'white' }}>OFF</Text>
    )}
    renderOnIndicator={() => (
      <Text style={{ fontSize: 8, color: 'white' }}>ON</Text>
    )}
  />
</>


<>
  <Text style={styles.label}>Switch with on/off thumb indicator</Text>
  <Switch
    size={40}
    value={isEnabled}
    onChange={(value) => setIsEnabled(value)}
    activeTrackColor={'#6ab04c'}
    renderInactiveThumbIcon={() => (
      <Text style={{ fontSize: 12, color: 'black' }}>💩</Text>
    )}
    renderActiveThumbIcon={() => (
      <Text style={{ fontSize: 12, color: 'black' }}>🔥</Text>
    )}
  />
</>


<>
  <Text style={styles.label}>
    Switch with on/off thumb/track indicator
  </Text>
  <Switch
    size={40}
    value={isEnabled}
    onChange={(value) => setIsEnabled(value)}
    activeTrackColor={'#6ab04c'}
    inactiveTrackColor={'#eb4d4b'}
    renderInactiveThumbIcon={() => (
      <Text style={{ fontSize: 12, color: 'black' }}>💩</Text>
    )}
    renderActiveThumbIcon={() => (
      <Text style={{ fontSize: 12, color: 'black' }}>🔥</Text>
    )}
    renderOffIndicator={() => (
      <Text style={{ fontSize: 12, color: 'white' }}>OFF</Text>
    )}
    renderOnIndicator={() => (
      <Text style={{ fontSize: 12, color: 'white' }}>ON</Text>
    )}
  />
</>


<>
  <Text style={styles.label}>Big switch</Text>
  <Switch
    size={60}
    value={isEnabled}
    onChange={(value) => setIsEnabled(value)}
    activeTrackColor={'#4b7bec'}
    inactiveTrackColor={'#ff7f50'}
    renderInactiveThumbIcon={() => (
      <Text style={{ fontSize: 16, color: 'black' }}>💩</Text>
    )}
    renderActiveThumbIcon={() => (
      <Text style={{ fontSize: 16, color: 'black' }}>🔥</Text>
    )}
    renderOffIndicator={() => (
      <Text style={{ fontSize: 12, color: 'white' }}>OFF</Text>
    )}
    renderOnIndicator={() => (
      <Text style={{ fontSize: 12, color: 'white' }}>ON</Text>
    )}
  />
</>


<>
  <Text style={styles.label}>Big switch with thumb color</Text>
  <Switch
    size={60}
    value={isEnabled}
    onChange={(value) => setIsEnabled(value)}
    activeThumbColor={'#f9ca24'}
    inactiveThumbColor={'#6ab04c'}
    activeTrackColor={'#6ab04c'}
    inactiveTrackColor={'#ffffff'}
    renderInactiveThumbIcon={() => (
      <Text style={{ fontSize: 14, color: 'black' }}>💩</Text>
    )}
    renderActiveThumbIcon={() => (
      <Text style={{ fontSize: 14, color: 'black' }}>🔥</Text>
    )}
    renderOffIndicator={() => (
      <Text style={{ fontSize: 12, color: 'black' }}>OFF</Text>
    )}
    renderOnIndicator={() => (
      <Text style={{ fontSize: 12, color: 'white' }}>ON</Text>
    )}
  />
</>

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.