React Native Switchery provides 4 pre-configured size options to fit different UI contexts. Each size maintains the iOS-inspired design proportions while scaling appropriately.
Available Sizes
Mini
The smallest size option, ideal for compact interfaces or dense layouts.
import { Switch } from 'react-native-switchery';
export default function App() {
const [enabled, setEnabled] = useState(false);
return (
<Switch
value={enabled}
onValueChange={setEnabled}
size="mini"
/>
);
}
- Track Width:
38px
- Track Height:
20px
- Thumb Size:
16px
- Thumb Margin:
2px
Small
A compact size suitable for secondary controls or list items.
<Switch
value={enabled}
onValueChange={setEnabled}
size="small"
/>
- Track Width:
48px
- Track Height:
26px
- Thumb Size:
22px
- Thumb Margin:
2px
Default
The standard size, used when no size prop is specified. This matches typical iOS switch dimensions.
<Switch
value={enabled}
onValueChange={setEnabled}
size="default"
/>
{/* Or omit the size prop entirely */}
<Switch
value={enabled}
onValueChange={setEnabled}
/>
- Track Width:
56px
- Track Height:
30px
- Thumb Size:
26px
- Thumb Margin:
2px
Large
The largest size option, perfect for prominent controls or accessibility needs.
<Switch
value={enabled}
onValueChange={setEnabled}
size="large"
/>
- Track Width:
68px
- Track Height:
36px
- Thumb Size:
32px
- Thumb Margin:
2px
Size Comparison
Here’s a visual representation of all sizes together:
import { View } from 'react-native';
import { Switch } from 'react-native-switchery';
export default function SizeComparison() {
const [enabled, setEnabled] = useState(false);
return (
<View style={{ gap: 16 }}>
<Switch size="mini" value={enabled} onValueChange={setEnabled} />
<Switch size="small" value={enabled} onValueChange={setEnabled} />
<Switch size="default" value={enabled} onValueChange={setEnabled} />
<Switch size="large" value={enabled} onValueChange={setEnabled} />
</View>
);
}
Combining Sizes with Variants
All sizes work with any variant:
<Switch size="mini" variant="success" value={enabled} onValueChange={setEnabled} />
<Switch size="small" variant="danger" value={enabled} onValueChange={setEnabled} />
<Switch size="large" variant="warning" value={enabled} onValueChange={setEnabled} />
For better touch accessibility, consider using size="large" for critical controls or when designing for users with motor impairments.
Technical Details
Each size preset maintains consistent proportions:
- The thumb margin is always
2px across all sizes
- The thumb diameter is designed to fit within the track with appropriate padding
- The animation behavior remains identical across all sizes
These metrics are defined in /lib/utils.tsx and automatically applied when you specify a size prop.