reactnatively

Switch

An animated toggle switch supporting controlled and uncontrolled usage, inline labels, glass track style, and semantic color tokens.

Import

typescript

import { Switch } from 'reactnatively';

Interactive preview

Push Notifications

Receive alerts on your device

Dark Mode

Switch to dark theme

Location Access

Allow location tracking

SettingsScreen.tsx

1import { View, Text, StyleSheet } from 'react-native';2import { Switch, GlassView } from 'reactnatively';34const settings = [5  { key: 'notifications', label: 'Push Notifications', sub: 'Receive alerts on your device' },6  { key: 'darkMode', label: 'Dark Mode', sub: 'Switch to dark theme' },7  { key: 'location', label: 'Location Access', sub: 'Allow location tracking' },8];910export function SettingsScreen() {11  const [prefs, setPrefs] = useState({12    notifications: true,13    darkMode: true,14    location: false,15  });1617  return (18    <GlassView elevation={1} borderRadius={16} style={styles.card}>19      {settings.map((s, i) => (20        <View key={s.key}>21          {i > 0 && <View style={styles.divider} />}22          <View style={styles.row}>23            <View>24              <Text style={styles.label}>{s.label}</Text>25              <Text style={styles.sub}>{s.sub}</Text>26            </View>27            <Switch28              value={prefs[s.key as keyof typeof prefs]}29              onValueChange={(v) => setPrefs((p) => ({ ...p, [s.key]: v }))}30            />31          </View>32        </View>33      ))}34    </GlassView>35  );36}3738const styles = StyleSheet.create({39  card: { padding: 16, gap: 0 },40  row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingVertical: 12 },41  label: { color: 'rgba(255,255,255,0.85)', fontSize: 14, fontWeight: '500' },42  sub: { color: 'rgba(255,255,255,0.4)', fontSize: 12, marginTop: 2 },43  divider: { height: 1, backgroundColor: 'rgba(255,255,255,0.06)' },44});

Settings screen

NotificationsSettings.tsx

1import { useState } from 'react';2import { View, StyleSheet } from 'react-native';3import { Switch, LiquidCard, LiquidCardBody, Text, Heading } from 'reactnatively';45export function NotificationsSettings() {6  const [push, setPush] = useState(true);7  const [email, setEmail] = useState(false);8  const [sms, setSms] = useState(false);9  const [marketing, setMarketing] = useState(false);1011  return (12    <View style={styles.root}>13      <Heading level="h3" style={{ marginBottom: 16 }}>Notifications</Heading>14      <LiquidCard elevation={1} borderRadius={16}>15        <LiquidCardBody>16          <View style={styles.row}>17            <Text variant="md">Push notifications</Text>18            <Switch checked={push} onChange={setPush} color="primary" />19          </View>20          <View style={styles.row}>21            <Text variant="md">Email digest</Text>22            <Switch checked={email} onChange={setEmail} color="success" />23          </View>24          <View style={styles.row}>25            <Text variant="md">SMS alerts</Text>26            <Switch checked={sms} onChange={setSms} color="warning" />27          </View>28          <View style={styles.row}>29            <Text variant="md" color="rgba(255,255,255,0.5)">Marketing (disabled)</Text>30            <Switch checked={marketing} onChange={setMarketing} isDisabled />31          </View>32        </LiquidCardBody>33      </LiquidCard>34    </View>35  );36}3738const styles = StyleSheet.create({39  root: { flex: 1, padding: 20 },40  row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingVertical: 10 },41});

Glass switches with labels

QuickToggles.tsx

1import { View, StyleSheet } from 'react-native';2import { Switch } from 'reactnatively';34export function QuickToggles() {5  return (6    <View style={styles.container}>7      <Switch8        defaultChecked9        label="Dark Mode"10        labelPosition="left"11        glass12        size="lg"13        color="primary"14      />15      <Switch16        label="Haptic Feedback"17        labelPosition="left"18        glass19        size="lg"20        color="success"21      />22      <Switch23        defaultChecked24        label="Auto-lock"25        labelPosition="left"26        glass27        size="lg"28        color="warning"29      />30    </View>31  );32}3334const styles = StyleSheet.create({35  container: { gap: 20, padding: 24 },36});

Props

Prop	Type	Default	Description
checked	boolean	undefined	Controlled checked state.
defaultChecked	boolean	false	Initial checked state for uncontrolled usage.
onChange	(checked: boolean) => void	undefined	Called when the switch value changes.
size	'sm' \| 'md' \| 'lg'	"md"	Controls the physical size of the toggle.
color	'primary' \| 'success' \| 'warning' \| 'error'	"primary"	Track color when the switch is on.
label	string	undefined	Text label rendered alongside the switch.
labelPosition	'left' \| 'right'	"right"	Position of the label relative to the switch.
glass	boolean	false	Renders the track with a glass surface.
isDisabled	boolean	false	Prevents interaction and reduces opacity.
style	StyleProp<ViewStyle>	undefined	Style applied to the outer row container.