A Radio Button in React Native allows users to select only one option from a group. Unlike web development, React Native does not provide a built-in radio button component, so we create custom radio buttons using basic components like View, Pressable, and useState.
View and stylesPressable or TouchableOpacityRadio buttons work by storing the selected option in state. When a user taps a radio option, the state updates and the UI re-renders to reflect the selected value.
// Simple custom radio button example in React Native
import React, { useState } from "react";
import { View, Text, Pressable, StyleSheet } from "react-native";
const RadioButtonExample = () => {
const [selected, setSelected] = useState("male");
return (
<View style={styles.container}>
{/* Option 1 */}
<Pressable style={styles.option} onPress={() => setSelected("male")}>
<View style={[styles.circle, selected === "male" && styles.selected]} />
<Text>Male</Text>
</Pressable>
{/* Option 2 */}
<Pressable style={styles.option} onPress={() => setSelected("female")}>
<View style={[styles.circle, selected === "female" && styles.selected]} />
<Text>Female</Text>
</Pressable>
</View>
);
};
const styles = StyleSheet.create({
container: { padding: 20 },
option: { flexDirection: "row", alignItems: "center", marginBottom: 10 },
circle: { width: 20, height: 20, borderRadius: 10, borderWidth: 2, borderColor: "#4b5563", marginRight: 10 },
selected: { backgroundColor: "#2563eb", borderColor: "#2563eb" }
});
export default RadioButtonExample;
male is selectedClick the buttons below. This "Simulator" uses HTML/CSS to mimic exactly how the React Native View and Pressable components behave logic-wise.