Event Handling & Touchables

import { Pressable, StyleSheet, Text, View } from "react-native";
 
interface IconButtonProps {
  label: string;
  onPress: () => void;
  disabled?: boolean;
}
 
export function IconButton({ label, onPress, disabled = false }: IconButtonProps) {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      hitSlop={12}
      accessibilityRole="button"
      accessibilityState={{ disabled }}
      style={({ pressed }) => [
        styles.button,
        pressed && !disabled && styles.pressed,
        disabled && styles.disabled,
      ]}
      android_ripple={{ color: "rgba(255,255,255,0.25)", borderless: false }}
    >
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  button: {
    minHeight: 44,
    minWidth: 44,
    paddingHorizontal: 16,
    borderRadius: 10,
    backgroundColor: "#2563eb",
    alignItems: "center",
    justifyContent: "center",
  },
  pressed: { opacity: 0.85 },
  disabled: { opacity: 0.4 },
  label: { color: "#fff", fontWeight: "600", fontSize: 15 },
});

import { useState } from "react";
import {
  Platform,
  Pressable,
  StyleSheet,
  Text,
  View,
} from "react-native";
 
type Action = "save" | "share" | "delete";
 
const ACTIONS: { key: Action; label: string; destructive?: boolean }[] = [
  { key: "save", label: "Save draft" },
  { key: "share", label: "Share link" },
  { key: "delete", label: "Delete", destructive: true },
];
 
export default function ActionSheetDemo() {
  const [lastEvent, setLastEvent] = useState("Tap an action");
  const [pressedKey, setPressedKey] = useState<Action | null>(null);
 
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Touch targets</Text>
      <Text style={styles.subtitle}>{lastEvent}</Text>
 
      <View style={styles.sheet}>
        {ACTIONS.map((action) => (
          <Pressable
            key={action.key}
            onPress={() => setLastEvent(`onPress: ${action.label}`)}
            onPressIn={() => setPressedKey(action.key)}
            onPressOut={() => setPressedKey(null)}
            onLongPress={() => setLastEvent(`onLongPress: ${action.label}`)}
            delayLongPress={400}
            hitSlop={{ top: 6, bottom: 6, left: 4, right: 4 }}
            accessibilityRole="button"
            accessibilityHint={
              action.destructive ? "Permanently removes the item" : undefined
            }
            style={({ pressed }) => [
              styles.row,
              pressed && styles.rowPressed,
              action.destructive && styles.rowDestructive,
            ]}
            android_ripple={{
              color: action.destructive ? "rgba(239,68,68,0.2)" : "rgba(37,99,235,0.15)",
            }}
          >
            <Text
              style={[
                styles.rowLabel,
                action.destructive && styles.destructiveText,
                pressedKey === action.key && styles.rowLabelPressed,
              ]}
            >
              {action.label}
            </Text>
            <Text style={styles.chevron}>›</Text>
          </Pressable>
        ))}
      </View>
 
      <View style={styles.toolbar}>
        <Pressable
          onPress={() => setLastEvent("Toolbar icon tapped")}
          hitSlop={16}
          style={({ pressed }) => [styles.iconHit, pressed && styles.iconHitPressed]}
        >
          <View style={styles.iconGlyph} />
        </Pressable>
        <Text style={styles.toolbarHint}>
          Icon is 24×24 with 16pt hitSlop → 56×56 effective target
        </Text>
      </View>
 
      {Platform.OS === "ios" && (
        <Text style={styles.note}>
          iOS: opacity feedback; Android: ripple via android_ripple
        </Text>
      )}
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 20, backgroundColor: "#f8fafc", gap: 16 },
  title: { fontSize: 22, fontWeight: "700", color: "#0f172a" },
  subtitle: { fontSize: 15, color: "#475569" },
  sheet: {
    backgroundColor: "#fff",
    borderRadius: 14,
    overflow: "hidden",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "#cbd5e1",
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16,
    paddingVertical: 14,
    minHeight: 48,
  },
  rowPressed: { backgroundColor: "#f1f5f9" },
  rowDestructive: {},
  rowLabel: { flex: 1, fontSize: 16, color: "#0f172a" },
  rowLabelPressed: { color: "#2563eb" },
  destructiveText: { color: "#dc2626" },
  chevron: { fontSize: 20, color: "#94a3b8" },
  toolbar: { flexDirection: "row", alignItems: "center", gap: 12 },
  iconHit: { padding: 4 },
  iconHitPressed: { opacity: 0.6 },
  iconGlyph: {
    width: 24,
    height: 24,
    borderRadius: 6,
    backgroundColor: "#2563eb",
  },
  toolbarHint: { flex: 1, fontSize: 13, color: "#64748b" },
  note: { fontSize: 12, color: "#94a3b8" },
});

// Uniform expansion (number = all sides)
<Pressable hitSlop={12} />
 
// Per-edge control - useful above tab bars or under notches
<Pressable hitSlop={{ top: 8, bottom: 16, left: 12, right: 12 }} />
 
// Negative hitSlop shrinks the target (rare - overlapping rows)
<Pressable hitSlop={-4} />

// Primitive layer - sufficient for buttons and list rows
<Pressable onPress={save} />
 
// Gesture Handler - pan, pinch, simultaneous handlers (install in Expo)
import { Gesture, GestureDetector } from "react-native-gesture-handler";
 
const pan = Gesture.Pan().onEnd((e) => {
  if (e.translationX < -80) archiveItem();
});

import type { PressableProps, StyleProp, ViewStyle } from "react-native";
import type { GestureResponderEvent } from "react-native";
 
type ButtonStyle = PressableProps["style"]; // StyleProp<ViewStyle> | fn
 
interface RowProps {
  onPress: (event: GestureResponderEvent) => void;
  style?: StyleProp<ViewStyle>;
}
 
// Style function form
const styleFn: Extract<ButtonStyle, Function> = ({ pressed, hovered }) => [
  styles.base,
  pressed && styles.pressed,
];