React Native theorytheory 0/50 · 0%
Components · easy

8. Handling touch input

Pressable states and gesture basics.

`Pressable` exposes press states via a function-as-children pattern, letting you style differently while pressed, useful for wallet action buttons that must give immediate feedback.

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

function ConnectButton({ onPress }: { onPress: () => void }) {
  return (
    <Pressable onPress={onPress}>
      {({ pressed }) => (
        <Text style={{ opacity: pressed ? 0.5 : 1 }}>Connect Wallet</Text>
      )}
    </Pressable>
  );
}

For more advanced gestures (swipe-to-dismiss a notification, drag-to-reorder tokens) you reach for `react-native-gesture-handler`, which offers finer-grained pan/tap/long-press recognizers.

Check your understanding

  1. 1. How can Pressable expose whether it's currently pressed?

  2. 2. Which library adds advanced gesture recognizers?

  3. 3. Which core component is the modern replacement for TouchableOpacity in new code?