Lesson 1 of 5 · reading 15–25 minutes; practice and project time is on the module page

Touch targets and feedback

🎯You'll be able to

Size touch targets for fingers, show that a touch was received, and place important controls where thumbs reach.

🏠The everyday picture

Lift buttons are large, spaced apart and light up when pressed. A tiny, unlit button in a crowded lift gets pressed by mistake or pressed three times.

📘What it really is

Size: at least 48 dp on Android and 44 points on iOS for anything you can press. A small icon can have a larger pressable area with padding or hitSlop.
Spacing: keep targets apart so a finger doesn't hit two.
Feedback: show the press at once (a colour change or ripple through Pressable's pressed state), even if the work takes longer.
Reach: on large phones, the bottom of the screen is easiest to reach with one thumb; put frequent actions there.
Prevent double actions: disable a button while its action runs, or make the action safe to repeat.

📝A worked example

Input: KhetNote's starter rows are 40 points tall, and the Undo button is 28.

Steps:

Set ROW_HEIGHT to 72 and give rows minHeight: 48.
Give Undo minHeight: 48 and minWidth: 48, with padding around the text.
Run Project 2's test 4, which checks everything pressable is at least 48 points tall.

Expected output: rows and buttons that a finger hits first time.

🌍Where it's used

Payment apps use large, spaced buttons for amounts.
Maps place main actions at the bottom for one-handed use.
Accessibility reviews measure targets on every screen.

📝Case scenario

A transport app's "Cancel trip" and "Call driver" icons sat 4 points apart. Riders cancelled trips by accident while trying to call. Spacing them and adding a confirmation for cancelling ended the complaints.

🖱️Try it

Run npm run test:screens on the starter and read test 4's message. Success: you can name the control it found too small and its height.

⚠️Common mistakes

Tiny icons. Sign: missed taps. Fix: a 48-point pressable area.
No pressed state. Sign: users tap twice. Fix: visible feedback at once.
Targets crowded together. Sign: wrong actions. Fix: spacing, and confirmation for risky ones.

🛠️For your project

Project 2's test 4 checks the list rows, the form fields and button, and the Undo button.

✅Quick check

How can a small icon have a large enough touch target?

Show the answer

With padding or hitSlop around it, so the pressable area is at least 48 points.

Why show feedback the moment a button is pressed?

Show the answer

So people know the press was received and don't press again.