This page documents all exported TypeScript types used in React Native Switchery.
SwitchProps
The props interface for the Switch component.
type SwitchProps = {
value: boolean;
activeColor?: string;
inactiveColor?: string;
thumbColor?: string;
onValueChange?: (nextValue: boolean) => void;
disabled?: boolean;
size?: 'mini' | 'small' | 'default' | 'large';
testID?: string;
variant?: SwitchVariant;
trackBorderColor?: string;
trackBorderWidth?: number;
thumbBorderColor?: string;
thumbBorderWidth?: number;
accessibilityLabel?: string;
accessibilityHint?: string;
};
Properties
Current state of the switch (true = on, false = off).
Fill color of the animated pill when expanded (visible when switch is OFF). Overrides variant color if provided.
Track background color when pill is collapsed (visible when switch is ON). Overrides variant color if provided.
Color of the sliding thumb. Overrides variant color if provided.
onValueChange
(nextValue: boolean) => void
Callback invoked when the switch is toggled.
Whether the switch is disabled.
size
'mini' | 'small' | 'default' | 'large'
Size preset for the switch.
Test identifier for automated testing.
Predefined color variant.
Custom border color for the track.
Border width for the track.
Custom border color for the thumb.
Border width for the thumb.
Accessibility label for screen readers.
Additional accessibility context.
SwitchVariant
Union type defining available color variants.
type SwitchVariant =
| 'primary'
| 'danger'
| 'warning'
| 'success'
| 'info';
| Variant | Active Color | Inactive Color | Hex Color |
|---|
primary | White | Blue | #2196F3 |
danger | White | Red | #E53935 |
warning | White | Orange | #FB8C00 |
success | White | Green | #43A047 |
info | White | Light Blue | #1E88E5 |
Usage
import { SwitchVariant } from 'react-native-switchery';
const variant: SwitchVariant = 'success';
<Switch value={true} variant={variant} />
SwitchMetrics
Metrics defining the physical dimensions of the switch.
type SwitchMetrics = {
pillWidth: number;
pillHeight: number;
thumbSize: number;
thumbMargin: number;
};
Properties
Total width of the switch track in pixels.
Total height of the switch track in pixels.
Diameter of the thumb circle in pixels.
Margin around the thumb inside the track in pixels.
Size Presets
The library provides the following size presets:
const METRICS = {
mini: { pillWidth: 38, pillHeight: 20, thumbSize: 16, thumbMargin: 2 },
small: { pillWidth: 48, pillHeight: 26, thumbSize: 22, thumbMargin: 2 },
default: { pillWidth: 56, pillHeight: 30, thumbSize: 26, thumbMargin: 2 },
large: { pillWidth: 68, pillHeight: 36, thumbSize: 32, thumbMargin: 2 },
};
UseSwitchAnimationParams
Parameters for the switch animation hook (internal).
type UseSwitchAnimationParams = {
value: boolean;
pillWidth: number;
thumbSize: number;
thumbMargin: number;
};
useSwitchAnimation hook to calculate animation values.
Properties
Current switch state used to determine animation direction.
Width of the switch track.
UseSwitchStylesParams
Parameters for the switch styles hook (internal).
type UseSwitchStylesParams = {
variant?: SwitchVariant;
activeColor?: string;
inactiveColor?: string;
thumbColor?: string;
trackBorderColor?: string;
trackBorderWidth?: number;
thumbBorderColor?: string;
thumbBorderWidth?: number;
value: boolean;
pillWidth: number;
pillHeight: number;
thumbSize: number;
};
useSwitchStyles hook to compute the component’s styles based on props and state.
Properties
Custom active track color.
Custom inactive track color.
Custom track border color.
Custom thumb border color.
Width of the switch track.
Height of the switch track.
Type Imports
All types can be imported from the main package:
import {
SwitchProps,
SwitchVariant,
SwitchMetrics,
UseSwitchAnimationParams,
UseSwitchStylesParams,
} from 'react-native-switchery';
Type Examples
Defining Component Props with SwitchProps
import { SwitchProps } from 'react-native-switchery';
type SettingsRowProps = {
label: string;
switchProps: Omit<SwitchProps, 'value' | 'onValueChange'>;
};
function SettingsRow({ label, switchProps }: SettingsRowProps) {
const [enabled, setEnabled] = useState(false);
return (
<View>
<Text>{label}</Text>
<Switch {...switchProps} value={enabled} onValueChange={setEnabled} />
</View>
);
}
Using SwitchVariant in State
import { useState } from 'react';
import { SwitchVariant } from 'react-native-switchery';
function DynamicSwitch() {
const [variant, setVariant] = useState<SwitchVariant>('primary');
const [enabled, setEnabled] = useState(false);
return (
<Switch
value={enabled}
onValueChange={setEnabled}
variant={variant}
/>
);
}
Working with SwitchMetrics
import { SwitchMetrics } from 'react-native-switchery';
import { getSwitchMetrics } from 'react-native-switchery/utils';
function CustomComponent() {
const metrics: SwitchMetrics = getSwitchMetrics('large');
console.log(metrics.pillWidth); // 68
console.log(metrics.thumbSize); // 32
return <View style={{ width: metrics.pillWidth }} />;
}