Radio Buttons in React Native

React Native ships with NO built-in radio button component – unlike HTML's <input type="radio">, you build them yourself, usually from a circular View and state logic that ensures only ONE option is ever selected.

1. Description

The basic principle: ONE state value (not several booleans!) holds the currently selected option. Each radio option checks whether its own value matches the state, and renders itself filled in or empty accordingly.

2. Short example

const [selected, setSelected] = useState('small');

<TouchableOpacity onPress={() => setSelected('small')}>
  <Text>{selected === 'small' ? '????' : '⚪'} Small</Text>
</TouchableOpacity>

3. Complete project: size selection

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, selected, onPress }) {
  return (
    <TouchableOpacity style={styles.row} onPress={onPress}>
      <View style={[styles.circle, selected && styles.circleActive]}>
        {selected && <View style={styles.dot} />}
      </View>
      <Text style={styles.label}>{label}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10 },
  circle: { width: 20, height: 20, borderRadius: 10, borderWidth: 2, borderColor: '#9ca3af', alignItems: 'center', justifyContent: 'center' },
  circleActive: { borderColor: '#2563eb' },
  dot: { 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 SIZES = ['Small', 'Medium', 'Large'];

export default function App() {
  const [selected, setSelected] = useState('Medium');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Choose a size</Text>
      {SIZES.map((size) => (
        <RadioOption
          key={size}
          label={size}
          selected={selected === size}
          onPress={() => setSelected(size)}
        />
      ))}
      <Text style={styles.result}>Selected: {selected}</Text>
    </View>
  );
}

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

4. Explanation

ONE shared selected state in the PARENT element (App), not a separate state per radio option – that's exactly what guarantees two options are never selected at once.
selected={{selected === size}} – each option is only ever given a boolean: "am I the selected one?"
The inner <View style={{styles.dot}}> only gets rendered when selected is true – the classic && shortcut from the "Conditional Rendering" chapter.

5. Outputs

Ausgabe

Three rows with circle icons and labels ("Small", "Medium", "Large"). "Medium" starts selected (blue border, filled dot). Tapping another option marks it instead and removes the mark from the previous one; text below shows the current selection.