Touchable, Pressable & TextInput

Use Pressable (modern) or TouchableOpacity for buttons and tappable areas. TextInput handles keyboard input. Always provide accessibilityLabel for screen readers.

Handling user interaction

Use Pressable (modern) or TouchableOpacity for buttons and tappable areas. TextInput handles keyboard input. Always provide accessibilityLabel for screen readers.

Pressable button with feedback

import { Pressable, Text, StyleSheet } from "react-native";

export function PrimaryButton({ title, onPress }: { title: string; onPress: () => void }) {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [styles.btn, pressed && styles.pressed]}
      accessibilityRole="button"
      accessibilityLabel={title}
    >
      <Text style={styles.label}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  btn: { backgroundColor: "#06b6d4", padding: 14, borderRadius: 10, alignItems: "center" },
  pressed: { opacity: 0.85 },
  label: { color: "#fff", fontWeight: "600" },
});

Controlled TextInput

const [email, setEmail] = useState("");
<TextInput
  value={email}
  onChangeText={setEmail}
  placeholder="Email"
  keyboardType="email-address"
  autoCapitalize="none"
  style={styles.input}
/>