Switch-API in React Native

Switch ist der native An/Aus-Kippschalter – das mobile Äquivalent zu einer HTML-Checkbox, nur mit dem typischen Wisch-Erscheinungsbild von iOS/Android.

1. Beschreibung

Switch ist eine "kontrollierte" Komponente wie TextInput: der aktuelle Zustand kommt über die Prop value (ein Boolean) aus React-State, Änderungen werden über onValueChange gemeldet.

2. Kurzes Beispiel

const [aktiv, setAktiv] = useState(false);

<Switch value={aktiv} onValueChange={setAktiv} />

3. Komplettes Projekt: Benachrichtigungs-Einstellungen

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

App.js

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

function EinstellungsZeile({ label, wert, onAendern }) {
  return (
    <View style={styles.zeile}>
      <Text style={styles.label}>{label}</Text>
      <Switch
        value={wert}
        onValueChange={onAendern}
        trackColor={{ false: '#d1d5db', true: '#93c5fd' }}
        thumbColor={wert ? '#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.titel}>Benachrichtigungen</Text>
      <EinstellungsZeile label="E-Mail" wert={email} onAendern={setEmail} />
      <EinstellungsZeile label="Push" wert={push} onAendern={setPush} />
      <EinstellungsZeile label="SMS" wert={sms} onAendern={setSms} />
    </View>
  );
}

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

4. Erklärung

value – der aktuelle Boolean-Zustand (an/aus), aus React-State.
onValueChange – bekommt den NEUEN Boolean-Wert direkt als Argument (kein Event-Objekt wie bei onChangeText).
trackColor={{ false: ..., true: ... }} – Farbe der "Bahn" hinter dem Schalter, getrennt für aus- und eingeschalteten Zustand.
thumbColor – Farbe des runden Schalt-Knopfs selbst.
EinstellungsZeile ist eine wiederverwendbare "Dumb Component" (siehe eigenes Thema), die dieselbe Zeilen-Struktur für alle drei Einstellungen übernimmt.

5. Ausgaben

Ausgabe

Eine Überschrift "Benachrichtigungen" mit drei Zeilen ("E-Mail", "Push", "SMS"), jede mit eigenem Schalter rechts. "E-Mail" startet eingeschaltet (blau), die anderen beiden ausgeschaltet (grau). Antippen eines Schalters kippt ihn sofort um, unabhängig von den anderen.