A web button gets hover styles, focus rings and a pointer cursor for free. On a phone there’s no hover and no cursor: there’s a thumb, which is wide, imprecise and moving. Good touch handling on mobile comes down to three things: a large enough target, feedback the instant the finger lands, and inputs that open the right keyboard.
\nPressable wraps any content and reports touches. Its style prop can be a function that receives { pressed }, so you can dim or tint the button while the finger is down:
import { Pressable, Text } from 'react-native';\n\ntype Props = { label: string; onPress: () => void; disabled?: boolean };\n\nexport function PrimaryButton({ label, onPress, disabled = false }: Props) {\n return (\n <Pressable\n onPress={onPress}\n disabled={disabled}\n accessibilityRole=\"button\"\n accessibilityState={{ disabled }}\n style={({ pressed }) => ({\n backgroundColor: disabled ? '#9bb5a7' : '#2f6f4e',\n opacity: pressed ? 0.75 : 1,\n paddingVertical: 14,\n paddingHorizontal: 20,\n borderRadius: 12,\n alignItems: 'center',\n })}\n >\n <Text style={{ color: 'white', fontSize: 16, fontWeight: '600' }}>{label}</Text>\n </Pressable>\n );\n}accessibilityRole="button" makes VoiceOver and TalkBack announce it as a button; the text inside becomes its label. For icon-only buttons, add accessibilityLabel="Delete hike" because there’s no text to read.
You’ll also see Button and TouchableOpacity in older code. Button can’t be styled beyond a color, and the Touchable* family is the older API. Reach for Pressable and build your own button component once.
Apple’s guideline is a minimum of 44 by 44 points; Material Design says 48 by 48 dp. A 24-point icon is fine visually, but too small to hit while walking down a trail. hitSlop grows the touch area without changing layout:
<Pressable\n onPress={() => onDelete(hike.id)}\n hitSlop={10}\n accessibilityRole=\"button\"\n accessibilityLabel={`Delete ${hike.name}`}\n>\n <TrashIcon size={24} />\n</Pressable>Pressable also gives you onLongPress (fired after about half a second by default) and onPressIn / onPressOut for the exact moments the finger lands and lifts. Trailhead uses a long press on a hike card to open a quick-actions sheet, a pattern iOS and Android users already know from their home screens. Use it for shortcuts only: nobody discovers a long press on their own, so every action behind one must also be reachable some other way.
On Android you can add android_ripple={{ color: '#00000022' }} for the platform’s ripple effect; iOS ignores that prop, so the pressed style still matters there.
TextInput works like a controlled <input>, with one naming difference. Use onChangeText, which hands you the new string. onChange gives you a native event object instead.
import { useState } from 'react';\nimport { Text, TextInput, View } from 'react-native';\nimport { PrimaryButton } from './PrimaryButton';\nimport { parseDistanceKm } from '../lib/parseDistance';\n\nexport function QuickLog({ onSave }: { onSave: (km: number) => void }) {\n const [text, setText] = useState('');\n const km = parseDistanceKm(text);\n\n return (\n <View style={{ gap: 8 }}>\n <Text>Distance (km)</Text>\n <TextInput\n value={text}\n onChangeText={setText}\n accessibilityLabel=\"Distance (km)\"\n keyboardType=\"decimal-pad\"\n placeholder=\"8.4\"\n returnKeyType=\"done\"\n style={{ borderWidth: 1, borderColor: '#c9d3cc', borderRadius: 10, padding: 12, fontSize: 18 }}\n />\n <PrimaryButton label=\"Save\" disabled={km === null} onPress={() => km !== null && onSave(km)} />\n </View>\n );\n}Notice what lives in state: the raw text, not a number. If you stored Number(text) instead, typing “8.” would immediately become 8 and the dot would vanish under the user’s thumb, and clearing the field would give you 0. Keep exactly what the user typed, and derive the parsed value during render. The button reads the derived value and stays disabled until it’s valid, which is clearer feedback than an error message that appears mid-typing.
The props that shape the mobile keyboard are worth knowing by name:
\n| Prop | \nWhat it does | \n
|---|---|
keyboardType | \ndecimal-pad, number-pad, email-address, phone-pad, url | \n
autoCapitalize | \nnone for emails and usernames; default capitalizes sentences | \n
autoComplete / textContentType | \nlet the OS offer saved emails, passwords and one-time codes | \n
returnKeyType | \nthe label on the return key: next, done, search | \n
secureTextEntry | \nhides the characters for passwords | \n
Getting these right is most of what makes a form feel native. An email field that capitalizes the first letter, or a code field that doesn’t offer the one-time code from the SMS that just arrived, tells users the app wasn’t built with care.
\n\nHere is the idea behind parseDistanceKm: normalize first (trim, lower-case, drop a trailing “km”, turn a comma into a dot), then accept only a plain positive number within a sensible range.
function parseDistanceKm(text) {\n const cleaned = String(text).trim().toLowerCase().replace(/\\s*km$/, '').replace(',', '.');\n if (!/^\\d+(\\.\\d+)?$/.test(cleaned)) return null;\n const km = Number(cleaned);\n return km > 0 && km <= 200 ? km : null;\n}\n\nfor (const input of ['8.4', '8,4', ' 12 km', 'abc', '0', '1.2.3']) {\n console.log(JSON.stringify(input), '->', parseDistanceKm(input));\n}Because it’s a plain function with no React Native imports, you can test it in milliseconds, which you’ll do in section 5. Keeping logic like this out of components is a habit that pays for itself on mobile, where running the app to check a case takes much longer than on the web.
\nThat completes the core toolkit. Section 2 is about making it look right: styling without the cascade, flexbox with different defaults, and screens of every size.
\n","toc":[{"id":"sec-1","text":"Pressable: the default for anything tappable","level":2},{"id":"sec-2","text":"Tap targets and hitSlop","level":2},{"id":"sec-3","text":"TextInput: controlled, and always a string","level":2},{"id":"sec-4","text":"Parsing what people type","level":2}],"takeaways":["Pressable is the default for anything tappable; its style can be a function of { pressed } for instant feedback.","Tap targets should be at least 44 by 44 points; hitSlop enlarges the touch area without changing the layout.","A controlled TextInput uses value plus onChangeText, which receives the string directly.","keyboardType changes the keyboard, not the value: a TextInput always gives you a string, so parse and validate it yourself."],"further":[{"title":"Pressable","url":"https://reactnative.dev/docs/pressable"},{"title":"TextInput","url":"https://reactnative.dev/docs/textinput"},{"title":"Handling Touches","url":"https://reactnative.dev/docs/handling-touches"}],"quiz":[{"q":"You set keyboardType="decimal-pad" on Trailhead’s distance input. What type is the value in onChangeText?
Users say Trailhead’s small trash icon is hard to hit, but the design must stay 24 by 24 points. What’s the best fix?
","options":[{"text":"AddhitSlop={10} to the Pressable so the touch area grows by 10 points on each side.","why":"Correct. The icon keeps its visual size while the tappable area reaches 44 by 44."},{"text":"Wrap the icon in a second, invisible Pressable.","why":"Two overlapping touch targets make it unclear which one receives the press, and add an extra view for nothing."},{"text":"Switch to onLongPress so users have more time to aim.","why":"Long-press changes the gesture, not the target size. Users still miss, and now they also wait."}],"answer":0},{"q":"What’s wrong with this input?
\nconst [name, setName] = useState('');\n<TextInput value={name} onChange={setName} />onChange and onChangeText are aliases.","why":"They aren’t. onChange receives a native event object, so name would become an object."},{"text":"TextInput can’t be controlled; it must manage its own value.","why":"Controlled inputs are the normal pattern in React Native, exactly as on the web."},{"text":"onChange passes an event, not the text, so name becomes an object; use onChangeText={setName}.","why":"Correct. onChangeText hands you the new string directly."}],"answer":2}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Turn what a hiker types into whole minutes, or null if it isn't valid.\n// Accept: \"135\", \"2:15\", \"2h 15m\", \"2h15m\", \"1h\", \"45m\" (any case, extra spaces OK).\nfunction parseDurationMin(text) {\n return Number(text);\n}\n\nconsole.log(parseDurationMin('2h 15m'));\n"},"solution":{"js":"function parseDurationMin(text) {\n const s = String(text).trim().toLowerCase();\n let minutes = null;\n let m;\n if (/^\\d+$/.test(s)) {\n minutes = Number(s);\n } else if ((m = s.match(/^(\\d+):(\\d{2})$/))) {\n if (Number(m[2]) < 60) minutes = Number(m[1]) * 60 + Number(m[2]);\n } else if ((m = s.match(/^(?:(\\d+)\\s*h)?\\s*(?:(\\d+)\\s*m)?$/)) && (m[1] || m[2])) {\n minutes = Number(m[1] ?? 0) * 60 + Number(m[2] ?? 0);\n }\n return minutes !== null && minutes > 0 ? minutes : null;\n}\n\nconsole.log(parseDurationMin('2h 15m'));\n"},"checks":[{"id":"plain-minutes","test":"return typeof parseDurationMin === 'function' && parseDurationMin(\"135\") === 135 && parseDurationMin(\" 90 \") === 90;"},{"id":"clock-format","test":"return parseDurationMin(\"2:15\") === 135 && parseDurationMin(\"0:45\") === 45 && parseDurationMin(\"2:75\") === null;"},{"id":"hours-minutes","test":"return parseDurationMin(\"2h 15m\") === 135 && parseDurationMin(\"2h15m\") === 135 && parseDurationMin(\"1H 5M\") === 65;"},{"id":"single-unit","test":"return parseDurationMin(\"1h\") === 60 && parseDurationMin(\"45m\") === 45;"},{"id":"rejects-bad","test":"return parseDurationMin(\"\") === null && parseDurationMin(\"abc\") === null && parseDurationMin(\"0\") === null && parseDurationMin(\"h\") === null;"}],"title":"Parse a hike's duration","prompt":"Trailhead’s form has a Duration field with keyboardType="default", because hikers type durations in different ways. Write parseDurationMin(text) so it returns the duration in whole minutes, or null when the text isn’t valid.
Accept these shapes (ignoring case and surrounding spaces):
\n"135""2:15" (minutes must be below 60, so "2:75" is null)"2h 15m", "2h15m", "1h", "45m"Return null for empty text, anything else, and for zero.
String(text).trim().toLowerCase().","Handle each shape with its own regular expression and return early, e.g. /^(\\d+):(\\d{2})$/ for the clock style.","For the h/m form, /^(?:(\\d+)\\s*h)?\\s*(?:(\\d+)\\s*m)?$/ matches both parts optionally; make sure at least one group actually matched, or an empty string sneaks through."],"explanation":"The function normalizes the text, then tries one pattern per accepted shape, converting each to minutes. Every path that doesn’t match leaves minutes as null, and a final guard rejects zero. Keeping this out of the component means the form only asks one question (parseDurationMin(text) !== null) and you can unit-test every odd input without launching a simulator.