Skip to main content
React Native Switchery is highly customizable, allowing you to override default colors, add borders, and create unique switch designs that match your brand identity.

​
Color Customization

​
Active and Inactive Colors

Control the track color in both ON and OFF states: 
import { Switch } from 'react-native-switchery';

export default function App() {
  const [enabled, setEnabled] = useState(false);
  
  return (
    <Switch
      value={enabled}
      onValueChange={setEnabled}
      activeColor="#FF6B6B"    // Pill fill color (visible when OFF)
      inactiveColor="#4ECDC4" // Track color (visible when ON)
    />
  );
}

​
Thumb Color

Customize the color of the circular thumb: 
<Switch
  value={enabled}
  onValueChange={setEnabled}
  thumbColor="#FFD93D"
  inactiveColor="#6C5CE7"
/>

​
Complete Color Override

Combine all color props for full control: 
<Switch
  value={enabled}
  onValueChange={setEnabled}
  activeColor="#2D3436"
  inactiveColor="#DFE6E9"
  thumbColor="#FDCB6E"
/>

​
Border Customization

​
Track Border

Add a border around the switch track: 
<Switch
  value={enabled}
  onValueChange={setEnabled}
  trackBorderColor="#2C3E50"
  trackBorderWidth={2}
/>

​
Thumb Border

Add a border around the thumb for additional contrast: 
<Switch
  value={enabled}
  onValueChange={setEnabled}
  thumbBorderColor="#34495E"
  thumbBorderWidth={2}
/>

​
Combined Border Styling

Use both track and thumb borders together: 
<Switch
  value={enabled}
  onValueChange={setEnabled}
  activeColor="#FFFFFF"
  inactiveColor="#FFFFFF"
  thumbColor="#3498DB"
  trackBorderColor="#2980B9"
  trackBorderWidth={2}
  thumbBorderColor="#2980B9"
  thumbBorderWidth={1}
/>

​
Design Patterns

​
Minimalist Design

<Switch
  value={enabled}
  onValueChange={setEnabled}
  activeColor="#000000"
  inactiveColor="#CCCCCC"
  thumbColor="#FFFFFF"
/>

​
High Contrast

<Switch
  value={enabled}
  onValueChange={setEnabled}
  activeColor="#FFFFFF"
  inactiveColor="#000000"
  thumbColor="#FFD700"
  trackBorderColor="#FFD700"
  trackBorderWidth={2}
/>

​
Glassmorphism Style

<Switch
  value={enabled}
  onValueChange={setEnabled}
  activeColor="rgba(255, 255, 255, 0.3)"
  inactiveColor="rgba(255, 255, 255, 0.1)"
  thumbColor="#FFFFFF"
  trackBorderColor="rgba(255, 255, 255, 0.5)"
  trackBorderWidth={1}
/>

​
Brand-Specific Colors

<Switch
  value={enabled}
  onValueChange={setEnabled}
  activeColor="#1DA1F2"    // Twitter blue
  inactiveColor="#E1E8ED"
  thumbColor="#FFFFFF"
/>

​
Working with Variants

You can use variants as a base and override specific colors: 
{/* Start with the success variant but customize the active color */}
<Switch
  variant="success"
  activeColor="#A8E6CF"  // Light green instead of white
  value={enabled}
  onValueChange={setEnabled}
/>
Custom color props always take precedence over variant defaults. This allows you to use variants as starting points while maintaining full control.

​
Prop Reference

PropTypeDefaultDescription
activeColorstringVariant defaultTrack color when switch is ON
inactiveColorstringVariant defaultTrack color when switch is OFF
thumbColorstring#FFFFFFColor of the circular thumb
trackBorderColorstringundefinedBorder color around the track
trackBorderWidthnumber1Border width around the track (in pixels)
thumbBorderColorstringundefinedBorder color around the thumb
thumbBorderWidthnumber1Border width around the thumb (in pixels)

​
Tips

Accessibility: When customizing colors, ensure sufficient contrast between the thumb and track for users with visual impairments.
Consistency: Define your custom colors in a theme file and reuse them across your app for a cohesive design.
Border widths are specified in pixels, not React Native’s density-independent units. Keep this in mind when designing for multiple screen densities.

​
Advanced Example

Here’s a complete example with multiple customized switches: 
import { View, StyleSheet } from 'react-native';
import { Switch } from 'react-native-switchery';

export default function CustomSwitches() {
  const [settings, setSettings] = useState({
    notifications: false,
    darkMode: false,
    autoSave: true,
  });
  
  return (
    <View style={styles.container}>
      <Switch
        value={settings.notifications}
        onValueChange={(val) => setSettings({ ...settings, notifications: val })}
        activeColor="#667EEA"
        inactiveColor="#F7FAFC"
        thumbColor="#FFFFFF"
        trackBorderColor="#CBD5E0"
        trackBorderWidth={1}
        size="large"
      />
      
      <Switch
        value={settings.darkMode}
        onValueChange={(val) => setSettings({ ...settings, darkMode: val })}
        activeColor="#1A202C"
        inactiveColor="#EDF2F7"
        thumbColor="#F7FAFC"
        thumbBorderColor="#718096"
        thumbBorderWidth={1}
        size="default"
      />
      
      <Switch
        value={settings.autoSave}
        onValueChange={(val) => setSettings({ ...settings, autoSave: val })}
        variant="success"
        trackBorderColor="#2F855A"
        trackBorderWidth={2}
        size="small"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    gap: 16,
  },
});

Build docs developers (and LLMs) love

Get started for freeTalk to us