{"id":"l-rn-3-4","courseId":"react-native-apps","lang":"en","kind":"lesson","summary":"Build Trailhead’s add-hike form so it works with a phone keyboard, moving between fields, staying visible above the keyboard, saving on the first tap, and validating with clear per-field errors.","html":"

Forms are where mobile apps feel most different from the web. The keyboard covers half the screen, there’s no Tab key, the first tap on a button sometimes only closes the keyboard, and typing on glass is slow enough that every unnecessary error message feels personal. Trailhead’s “Log a hike” form has five fields: name, date, distance, duration and notes. Here’s how to make it pleasant.

\n

A draft of raw strings

\n

Keep everything the user typed in one object of strings, exactly as typed. Parse when you need numbers, as you did with parseDistanceKm in section 1:

\n
src/app/new-hike.tsx
import { useRef, useState, type ComponentRef } from 'react';\nimport { TextInput } from 'react-native';\n\ntype Draft = { name: string; date: string; distance: string; duration: string; notes: string };\n\n// Today's date in the phone's time zone. toISOString() would give the UTC date,\n// which is already tomorrow (or still yesterday) for part of the day in most places.\nfunction localToday() {\n  const now = new Date();\n  const pad = (n: number) => String(n).padStart(2, '0');\n  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;\n}\n\nconst emptyDraft = (): Draft => ({ name: '', date: localToday(), distance: '', duration: '', notes: '' });\n\nexport default function NewHike() {\n  const [draft, setDraft] = useState<Draft>(emptyDraft);\n  const [submitted, setSubmitted] = useState(false);\n  const [touched, setTouched] = useState<Partial<Record<keyof Draft, boolean>>>({});\n  const distanceRef = useRef<ComponentRef<typeof TextInput>>(null);\n  const durationRef = useRef<ComponentRef<typeof TextInput>>(null);\n\n  const set = (field: keyof Draft) => (text: string) => setDraft((d) => ({ ...d, [field]: text }));\n  // …errors, save and JSX below\n}
\n

The set('distance') helper gives each input an onChangeText without five near-identical functions. Storing strings means “8,” stays “8,” while the user types, instead of collapsing to 8 or NaN.

\n

Moving between fields

\n

There’s no Tab key, so the return key does the job. Label it with returnKeyType="next", and when it’s pressed, focus the next input through a ref:

\n
TSX
<TextInput\n  value={draft.name}\n  onChangeText={set('name')}\n  placeholder=\"Ridge Loop\"\n  autoCapitalize=\"words\"\n  returnKeyType=\"next\"\n  submitBehavior=\"submit\"\n  onSubmitEditing={() => distanceRef.current?.focus()}\n  onBlur={() => setTouched((t) => ({ ...t, name: true }))}\n/>\n<TextInput\n  ref={distanceRef}\n  value={draft.distance}\n  onChangeText={set('distance')}\n  keyboardType=\"decimal-pad\"\n  returnKeyType=\"next\"\n  onSubmitEditing={() => durationRef.current?.focus()}\n  onBlur={() => setTouched((t) => ({ ...t, distance: true }))}\n/>
\n

submitBehavior="submit" keeps the keyboard open while focus moves, so it doesn’t flicker closed and open again. On the last field, use returnKeyType="done" and let it submit the form. One honest caveat: numeric keypads on iOS have no return key at all, so users tap the next field or a toolbar button instead. That’s normal, and another reason not to rely on the keyboard alone.

\n

Keeping fields above the keyboard

\n

When the keyboard opens, it sits on top of your app. A field near the bottom (the notes) disappears behind it. The standard fix wraps the form in KeyboardAvoidingView and puts a ScrollView inside:

\n
TSX
import { KeyboardAvoidingView, Platform, ScrollView } from 'react-native';\n\n<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>\n  <ScrollView\n    contentContainerStyle={{ padding: 16, gap: 16 }}\n    keyboardShouldPersistTaps=\"handled\"\n    keyboardDismissMode=\"on-drag\"\n  >\n    {/* fields and the Save button */}\n  </ScrollView>\n</KeyboardAvoidingView>
\n

On iOS, padding adds bottom padding equal to the keyboard height, so the ScrollView shrinks and the focused field can scroll into view. On Android the window usually resizes for the keyboard already, so undefined is the recommended value. keyboardDismissMode="on-drag" closes the keyboard when the user scrolls, which feels natural.

\n\n

For long forms with many fields, Expo’s docs recommend react-native-keyboard-controller, whose KeyboardAwareScrollView scrolls the focused field into view automatically; the same library’s KeyboardToolbar adds previous, next and done buttons above the keyboard. It needs a development build, which Trailhead gets in section 4.

\n

A word about dates

\n

Trailhead’s draft keeps the date as a YYYY-MM-DD string, defaulted to today, because most hikes are logged the same day. Typing dates on a phone keyboard is miserable, though, so production apps show the platform’s own date picker: a wheel or calendar on iOS, a dialog on Android. The community package @react-native-community/datetimepicker wraps both, and it’s a good example of a component whose behaviour differs enough by platform that you’ll want the per-platform files from section 2.

\n

Validation that doesn’t nag

\n

Keep the rules in a pure function: draft in, errors out. An empty object means valid.

\n
src/lib/validateHike.ts
export function validateHike(d: Draft) {\n  const errors: Partial<Record<keyof Draft, string>> = {};\n  if (!d.name.trim()) errors.name = 'Give the hike a name.';\n  if (parseDistanceKm(d.distance) === null) errors.distance = 'Enter a distance in km, like 8.4.';\n  return errors;\n}
\n

Then decide when to show each message. Showing errors on the first keystroke punishes people for not having finished typing. Waiting for an alert after Save hides the form behind a list they must memorize. The pattern that works: show a field’s error once the user has left it (touched) or pressed Save (submitted), next to the field, and keep it live from then on so it disappears the moment they fix it.

\n
TSX
const errors = validateHike(draft);\nconst show = (field: keyof Draft) => (submitted || touched[field]) && errors[field];\n\nfunction save() {\n  setSubmitted(true);\n  if (Object.keys(errors).length > 0) return;\n  dispatch({ type: 'added', hike: toHike(draft) });\n  router.back();\n}\n\n// under the distance input:\n{show('distance') ? <Text style={{ color: '#b42318' }}>{errors.distance}</Text> : null}
\n

Two accessibility touches cost a line each: give every input an accessibilityLabel that matches its visible label, and keep error text right below its field so screen readers reach it next.

\n

toHike converts the valid draft into a real Hike (parsing numbers, generating an id). After saving, router.back() returns to the log, where the new hike is already at the top because the reducer put it there.

\n

The form currently opens as a normal pushed screen. Next you’ll present it as a modal, protect screens behind sign-in, and let links open Trailhead on a specific hike.

\n","toc":[{"id":"sec-1","text":"A draft of raw strings","level":2},{"id":"sec-2","text":"Moving between fields","level":2},{"id":"sec-3","text":"Keeping fields above the keyboard","level":2},{"id":"sec-4","text":"A word about dates","level":2},{"id":"sec-5","text":"Validation that doesn’t nag","level":2}],"takeaways":["Keep the form draft as raw strings in one state object, and parse and validate only when you need the result.","Chain fields with returnKeyType="next" and refs, so the return key moves to the next input instead of closing the keyboard.","Wrap the form in KeyboardAvoidingView with behavior="padding" on iOS, and give the inner ScrollView keyboardShouldPersistTaps="handled".","Validate in a pure function that returns an errors object, and show each error next to its field after the first submit or blur."],"further":[{"title":"Keyboard handling","url":"https://docs.expo.dev/guides/keyboard-handling/"},{"title":"KeyboardAvoidingView","url":"https://reactnative.dev/docs/keyboardavoidingview"},{"title":"ScrollView keyboardShouldPersistTaps","url":"https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps"}],"quiz":[{"q":"

Users report they have to tap Save twice on Trailhead’s form while the keyboard is open. The first tap only closes the keyboard. What fixes it?

","options":[{"text":"Call Keyboard.dismiss() at the start of the save handler.","why":"The save handler never ran on the first tap, so code inside it can’t help."},{"text":"Set keyboardShouldPersistTaps="handled" on the ScrollView that contains the form.","why":"Correct. By default, a tap outside the focused input while the keyboard is up only dismisses the keyboard; handled lets taps on buttons go through."},{"text":"Move the Save button above the inputs.","why":"The tap is swallowed wherever the button is, as long as it’s inside that ScrollView."}],"answer":1},{"q":"

On iOS, the notes field at the bottom of the form is hidden behind the keyboard when focused. Which setup is the usual fix?

","options":[{"text":"A KeyboardAvoidingView with behavior="padding" and flex: 1 around the form’s ScrollView.","why":"Correct. The view adds bottom padding equal to the keyboard’s height, so the ScrollView shrinks and can scroll the field into view."},{"text":"position: 'absolute' on the notes field with a high zIndex.","why":"The keyboard is a system window above your app; no zIndex puts your view over it."},{"text":"Set autoFocus on the notes field.","why":"That opens the keyboard on mount, which makes the overlap happen sooner, not go away."}],"answer":0},{"q":"

When should Trailhead show the error “Distance must be a number” under the distance field?

","options":[{"text":"On every keystroke from the first character.","why":"Typing “8,” on the way to “8,4” is momentarily invalid. Errors while the user is still typing are noise."},{"text":"Only in an alert after Save, listing every error at once.","why":"An alert hides the form, and the user has to remember the list after closing it."},{"text":"After the user leaves the field or presses Save, next to the field, and updating live once it’s showing.","why":"Correct. Wait until the user is done with a field, then keep the message in sync as they fix it."}],"answer":2},{"q":"

How do you make the return key on the name field move focus to the distance field?

","options":[{"text":"tabIndex={2} on the distance field.","why":"That’s a web attribute. Phone keyboards have no tab order to set."},{"text":"returnKeyType="next" on the name field and autoFocus on the distance field.","why":"autoFocus acts once on mount, not when the name field’s return key is pressed."},{"text":"Nothing; mobile keyboards move to the next field automatically.","why":"They don’t. Without handling it, return closes the keyboard on a single-line input."},{"text":"returnKeyType="next" plus onSubmitEditing={() => distanceRef.current?.focus()}, with a ref on the distance field.","why":"Correct. The key label says Next, and the handler moves focus."}],"answer":3}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Return an object with one message per invalid field. {} means the draft is valid.\n// `today` is the current date as 'YYYY-MM-DD', passed in so the function stays pure.\nfunction validateHikeForm(draft, today) {\n const errors = {};\n if (draft.name === '') errors.name = 'Give the hike a name.';\n return errors;\n}\n\nconst draft = { name: 'Ridge Loop', date: '2026-10-04', distance: '8,4', duration: '', notes: '' };\nconsole.log(validateHikeForm(draft, '2026-10-05'));\n"},"solution":{"js":"function isRealDate(text) {\n if (!/^\\d{4}-\\d{2}-\\d{2}$/.test(text)) return false;\n const [y, m, d] = text.split('-').map(Number);\n const date = new Date(Date.UTC(y, m - 1, d));\n return date.getUTCFullYear() === y && date.getUTCMonth() === m - 1 && date.getUTCDate() === d;\n}\n\nfunction validateHikeForm(draft, today) {\n const errors = {};\n const name = draft.name.trim();\n if (!name) errors.name = 'Give the hike a name.';\n else if (name.length > 60) errors.name = 'Keep the name under 60 characters.';\n\n if (!isRealDate(draft.date)) errors.date = 'Use a real date like 2026-10-04.';\n else if (draft.date > today) errors.date = \"That date hasn't happened yet.\";\n\n const cleaned = draft.distance.trim().replace(',', '.');\n const km = Number(cleaned);\n if (!/^\\d+(\\.\\d+)?$/.test(cleaned) || km <= 0 || km > 200) errors.distance = 'Enter a distance in km, like 8.4.';\n\n const duration = draft.duration.trim();\n if (duration && (!/^\\d+$/.test(duration) || Number(duration) < 1 || Number(duration) > 1440)) {\n errors.duration = 'Enter whole minutes between 1 and 1440.';\n }\n\n if (draft.notes.length > 500) errors.notes = 'Notes are limited to 500 characters.';\n return errors;\n}\n\nconst draft = { name: 'Ridge Loop', date: '2026-10-04', distance: '8,4', duration: '', notes: '' };\nconsole.log(validateHikeForm(draft, '2026-10-05'));\n"},"checks":[{"id":"valid-draft","test":"const ok = { name: 'Ridge Loop', date: '2026-10-04', distance: '8,4', duration: '', notes: '' }; const T = '2026-10-05'; const keys = (d) => Object.keys(validateHikeForm({ ...ok, ...d }, T)).sort().join(); return typeof validateHikeForm === 'function' && keys({}) === '' && keys({ duration: '135', notes: 'Windy.' }) === '';"},{"id":"name","test":"const ok = { name: 'Ridge Loop', date: '2026-10-04', distance: '8,4', duration: '', notes: '' }; const T = '2026-10-05'; const keys = (d) => Object.keys(validateHikeForm({ ...ok, ...d }, T)).sort().join(); return keys({ name: ' ' }) === 'name' && keys({ name: 'x'.repeat(61) }) === 'name';"},{"id":"date","test":"const ok = { name: 'Ridge Loop', date: '2026-10-04', distance: '8,4', duration: '', notes: '' }; const T = '2026-10-05'; const keys = (d) => Object.keys(validateHikeForm({ ...ok, ...d }, T)).sort().join(); return keys({ date: '04/10/2026' }) === 'date' && keys({ date: '2026-02-30' }) === 'date' && keys({ date: '2026-10-06' }) === 'date' && keys({ date: '2026-10-05' }) === '';"},{"id":"distance","test":"const ok = { name: 'Ridge Loop', date: '2026-10-04', distance: '8,4', duration: '', notes: '' }; const T = '2026-10-05'; const keys = (d) => Object.keys(validateHikeForm({ ...ok, ...d }, T)).sort().join(); return keys({ distance: '' }) === 'distance' && keys({ distance: 'far' }) === 'distance' && keys({ distance: '0' }) === 'distance' && keys({ distance: '12.5' }) === '';"},{"id":"duration","test":"const ok = { name: 'Ridge Loop', date: '2026-10-04', distance: '8,4', duration: '', notes: '' }; const T = '2026-10-05'; const keys = (d) => Object.keys(validateHikeForm({ ...ok, ...d }, T)).sort().join(); return keys({ duration: '2h' }) === 'duration' && keys({ duration: '0' }) === 'duration' && keys({ duration: '1441' }) === 'duration';"},{"id":"several","test":"const ok = { name: 'Ridge Loop', date: '2026-10-04', distance: '8,4', duration: '', notes: '' }; const T = '2026-10-05'; const keys = (d) => Object.keys(validateHikeForm({ ...ok, ...d }, T)).sort().join(); return keys({ name: '', distance: 'x', notes: 'n'.repeat(501) }) === 'distance,name,notes';"}],"title":"Validate the add-hike form","prompt":"

Write validateHikeForm(draft, today) for Trailhead’s form. draft holds the raw strings the user typed: name, date, distance, duration, notes. today is today’s date as YYYY-MM-DD. Return an object with a message for each invalid field (any non-empty string); return {} when everything is valid.

\n\n","hints":["Build errors field by field with if statements; each failing rule sets errors.field = '…'.","ISO date strings compare correctly as text, so draft.date > today means “in the future”. To reject 2026-02-30, build new Date(Date.UTC(y, m - 1, d)) and check that the year, month and day come back unchanged.","For the distance, normalize first (trim, comma to dot), then test against /^\\d+(\\.\\d+)?$/ before checking the range."],"explanation":"

Keeping validation in a pure function that maps a draft to an errors object means the form only needs Object.keys(errors).length === 0 to decide whether to save, and each field can look up its own message. Passing today in, rather than calling new Date() inside, keeps the function deterministic, so tests don’t break at midnight. The round-trip check through Date.UTC is a compact way to reject impossible dates, which JavaScript’s Date would otherwise silently roll over into March.

\n","checkLabels":{"valid-draft":"A complete, sensible draft has no errors","name":"Blank and overly long names are rejected","date":"Badly formatted, impossible and future dates are rejected","distance":"Missing, non-numeric and zero distances are rejected","duration":"A filled-in duration must be whole minutes from 1 to 1440","several":"Several invalid fields are all reported at once"}},"words":706,"readMinutes":3}