Yashotantra Academy logo
← React Native theorytheory 0/50 · 0%
level 1
Curious · 0 XP
streak
0d
perfect
0
badges
0

100 XP to Apprentice

Components · easy

8. Handling touch input

Pressable states and gesture basics.

1 min read3 questionsup to 50 XPtopic 8/50

Read in another language

AI translates the explanation and quiz text while preserving code and answer scoring.

`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.

How to study this topic

  1. 1. Read the explanation once end to end, skipping the code.
  2. 2. Re-read the code snippets and say out loud what each line does.
  3. 3. Answer the quiz without scrolling back — that is the real check.
  4. 4. Read every explanation, even for the answers you got right.

Scoring

  • · Up to 30 XP from quiz accuracy.
  • · +15 XP for a perfect first attempt.
  • · +5 XP while a 3-day streak is running.
  • · 75% or higher marks the topic complete.

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?

Badges

First light
Pass your first topic
Sharp shooter
3 perfect first-try quizzes
On a roll
Study 3 days in a row
Week warrior
Study 7 days in a row
Grinder
Earn 500 XP
Deep diver
Earn 1500 XP