Radio-Buttons in React Native

React Native bringt KEINE eingebaute Radio-Button-Komponente mit – anders als HTMLs <input type="radio"> bauen Sie sie selbst, meist aus einem Kreis-View und State-Logik, die sicherstellt, dass immer nur EINE Option ausgewählt ist.

1. Beschreibung

Das Grundprinzip: EIN State-Wert (nicht mehrere Booleans!) hält die aktuell ausgewählte Option fest. Jede Radio-Option prüft, ob ihr eigener Wert mit dem State übereinstimmt, und zeigt sich entsprechend ausgefüllt oder leer an.

2. Kurzes Beispiel

const [ausgewaehlt, setAusgewaehlt] = useState('klein');

<TouchableOpacity onPress={() => setAusgewaehlt('klein')}>
  <Text>{ausgewaehlt === 'klein' ? '????' : '⚪'} Klein</Text>
</TouchableOpacity>

3. Komplettes Projekt: Größenauswahl

npx create-expo-app radio-buttons-demo
cd radio-buttons-demo

components/RadioOption.js

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

function RadioOption({ label, ausgewaehlt, onPress }) {
  return (
    <TouchableOpacity style={styles.zeile} onPress={onPress}>
      <View style={[styles.kreis, ausgewaehlt && styles.kreisAktiv]}>
        {ausgewaehlt && <View style={styles.punkt} />}
      </View>
      <Text style={styles.label}>{label}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  zeile: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10 },
  kreis: { width: 20, height: 20, borderRadius: 10, borderWidth: 2, borderColor: '#9ca3af', alignItems: 'center', justifyContent: 'center' },
  kreisAktiv: { borderColor: '#2563eb' },
  punkt: { width: 10, height: 10, borderRadius: 5, backgroundColor: '#2563eb' },
  label: { marginLeft: 10, fontSize: 16 },
});

export default RadioOption;

App.js

import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RadioOption from './components/RadioOption';

const GROESSEN = ['Klein', 'Mittel', 'Groß'];

export default function App() {
  const [ausgewaehlt, setAusgewaehlt] = useState('Mittel');

  return (
    <View style={styles.container}>
      <Text style={styles.titel}>Größe wählen</Text>
      {GROESSEN.map((groesse) => (
        <RadioOption
          key={groesse}
          label={groesse}
          ausgewaehlt={ausgewaehlt === groesse}
          onPress={() => setAusgewaehlt(groesse)}
        />
      ))}
      <Text style={styles.ergebnis}>Ausgewählt: {ausgewaehlt}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 24 },
  titel: { fontSize: 20, fontWeight: 'bold', marginBottom: 12 },
  ergebnis: { marginTop: 16, color: '#6b7280' },
});

4. Erklärung

EIN gemeinsamer ausgewaehlt-State im ELTERN-Element (App), nicht je ein eigener State pro Radio-Option – genau das garantiert, dass niemals zwei Optionen gleichzeitig ausgewählt sind.
ausgewaehlt={{ausgewaehlt === groesse}} – jede Option bekommt nur einen Boolean übergeben: "bin ICH die ausgewählte?"
Der innere <View style={{styles.punkt}}> wird nur gerendert, wenn ausgewaehlt true ist – der klassische &&-Kurzschluss aus Kapitel "Conditional Rendering".

5. Ausgaben

Ausgabe

Drei Zeilen mit Kreis-Symbolen und Labels ("Klein", "Mittel", "Groß"). "Mittel" startet ausgewählt (blauer Rand, ausgefüllter Punkt). Antippen einer anderen Option markiert diese und entfernt die Markierung von der vorherigen; unten zeigt Text die aktuelle Auswahl an.