Simple Toggle
The most basic usage of the Switch component with controlled state management.
import { useState } from 'react';
import { View } from 'react-native';
import { Switch } from 'react-native-switchery';
export default function BasicSwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<View>
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
/>
</View>
);
}
Switch Variants
Pre-configured color variants for common use cases.
Primary
Success
Danger
Warning
Info
import { useState } from 'react';
import { View } from 'react-native';
import { Switch } from 'react-native-switchery';
export default function PrimarySwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
variant="primary"
/>
);
}
import { useState } from 'react';
import { View } from 'react-native';
import { Switch } from 'react-native-switchery';
export default function SuccessSwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
variant="success"
/>
);
}
import { useState } from 'react';
import { View } from 'react-native';
import { Switch } from 'react-native-switchery';
export default function DangerSwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
variant="danger"
/>
);
}
import { useState } from 'react';
import { View } from 'react-native';
import { Switch } from 'react-native-switchery';
export default function WarningSwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
variant="warning"
/>
);
}
import { useState } from 'react';
import { View } from 'react-native';
import { Switch } from 'react-native-switchery';
export default function InfoSwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
variant="info"
/>
);
}
Different Sizes
The Switch component supports four size presets to match your design requirements.
import { useState } from 'react';
import { Switch } from 'react-native-switchery';
export default function MiniSwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
size="mini"
/>
);
}
import { useState } from 'react';
import { Switch } from 'react-native-switchery';
export default function SmallSwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
size="small"
/>
);
}
import { useState } from 'react';
import { Switch } from 'react-native-switchery';
export default function DefaultSwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
size="default"
/>
);
}
import { useState } from 'react';
import { Switch } from 'react-native-switchery';
export default function LargeSwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
size="large"
/>
);
}
Disabled State
Prevent user interaction while maintaining visual consistency.
import { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Switch } from 'react-native-switchery';
export default function DisabledSwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<View style={styles.container}>
{/* Disabled in OFF state */}
<Switch
value={false}
onValueChange={() => {}}
disabled={true}
/>
{/* Disabled in ON state */}
<Switch
value={true}
onValueChange={() => {}}
disabled={true}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
gap: 16,
},
});
The disabled prop adds a semi-transparent overlay and prevents all interactions with the switch.
Custom Colors
Override default colors to match your brand or design system.
import { useState } from 'react';
import { Switch } from 'react-native-switchery';
export default function CustomColorSwitch() {
const [isEnabled, setIsEnabled] = useState(false);
return (
<Switch
value={isEnabled}
onValueChange={setIsEnabled}
activeColor="#10B981"
inactiveColor="#EF4444"
thumbColor="#FFFFFF"
/>
);
}
Use activeColor for the ON state background, inactiveColor for the OFF state, and thumbColor for the circular thumb element.