Switch API in React Native

Switch is the native on/off toggle – the mobile equivalent of an HTML checkbox, just with the familiar sliding look of iOS/Android.

1. Description

Switch is a "controlled" component like TextInput: the current state comes from React state via the value prop (a boolean), changes are reported via onValueChange.

2. Short example

const [active, setActive] = useState(false);

<Switch value={active} onValueChange={setActive} />

3. Complete project: notification settings

npx create-expo-app switch-demo
cd switch-demo

App.js

import { useState } from 'react';
import { View, Text, Switch, StyleSheet } from 'react-native';

function SettingRow({ label, value, onChange }) {
  return (
    <View style={styles.row}>
      <Text style={styles.label}>{label}</Text>
      <Switch
        value={value}
        onValueChange={onChange}
        trackColor={{ false: '#d1d5db', true: '#93c5fd' }}
        thumbColor={value ? '#2563eb' : '#f4f4f5'}
      />
    </View>
  );
}

export default function App() {
  const [email, setEmail] = useState(true);
  const [push, setPush] = useState(false);
  const [sms, setSms] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Notifications</Text>
      <SettingRow label="Email" value={email} onChange={setEmail} />
      <SettingRow label="Push" value={push} onChange={setPush} />
      <SettingRow label="SMS" value={sms} onChange={setSms} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 20 },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 16 },
  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
  label: { fontSize: 16 },
});

4. Explanation

value – the current boolean state (on/off), from React state.
onValueChange – receives the NEW boolean value directly as its argument (no event object, unlike onChangeText).
trackColor={{ false: ..., true: ... }} – color of the "track" behind the switch, separate for off/on states.
thumbColor – color of the round switch knob itself.
SettingRow is a reusable "dumb component" (see its own topic) that handles the same row structure for all three settings.

5. Outputs

Ausgabe

A heading "Notifications" with three rows ("Email", "Push", "SMS"), each with its own switch on the right. "Email" starts on (blue), the other two start off (gray). Tapping a switch immediately toggles it, independently of the others.