{"id":"l-rn-3-5","courseId":"react-native-apps","lang":"en","kind":"lesson","summary":"Present Trailhead’s add-hike form as a modal, keep signed-out users on the sign-in screen with Stack.Protected, and open specific hikes from deep links, knowing how URLs are matched to route files.","html":"

Three situations don’t fit the push-a-screen pattern you’ve used so far. Logging a hike is a short task the user starts and finishes, so it should feel separate from browsing. Some screens should exist only for signed-in users. And Trailhead should open on the right hike when someone taps a link in a reminder or a message. Expo Router handles all three in the layout file.

\n

The add-hike form as a modal

\n

A modal is a screen presented over the current context, usually sliding up from the bottom. On iOS it appears as a card with the previous screen visible behind it, and users can swipe it down to cancel. Make the form a modal by setting its presentation in the root Stack:

\n
src/app/_layout.tsx
<Stack>\n  <Stack.Screen name=\"(tabs)\" options={{ headerShown: false }} />\n  <Stack.Screen name=\"hikes/[id]\" options={{ title: 'Hike' }} />\n  <Stack.Screen name=\"new-hike\" options={{ presentation: 'modal', title: 'Log a hike' }} />\n</Stack>
\n

Opening it is still router.push('/new-hike') (or a Link); closing it after a save is router.back(), which pops the modal like any screen. Android has no card-style sheet by default, so the modal appears as a full-screen page with a different animation; give the form a visible Cancel button in headerLeft so both platforms have an obvious way out.

\n

When the form has unsaved input, swiping it away loses the user’s typing. For long forms, confirm before discarding with an Alert on Cancel; for a short form like Trailhead’s, a draft that’s quick to retype is an acceptable trade.

\n

Protected routes

\n

Trailhead syncs hikes to an account, so most screens require signing in. Stack.Protected wraps routes in a condition:

\n
src/app/_layout.tsx
import { Stack } from 'expo-router';\nimport { useSession } from '../state/session';\n\nexport default function RootLayout() {\n  const { isSignedIn, isLoading } = useSession();\n  if (isLoading) return null; // the splash screen is still showing\n\n  return (\n    <Stack>\n      <Stack.Protected guard={!isSignedIn}>\n        <Stack.Screen name=\"sign-in\" options={{ headerShown: false }} />\n      </Stack.Protected>\n\n      <Stack.Protected guard={isSignedIn}>\n        <Stack.Screen name=\"(tabs)\" options={{ headerShown: false }} />\n        <Stack.Screen name=\"hikes/[id]\" options={{ title: 'Hike' }} />\n        <Stack.Screen name=\"new-hike\" options={{ presentation: 'modal', title: 'Log a hike' }} />\n      </Stack.Protected>\n    </Stack>\n  );\n}
\n

When guard is false, those routes are unavailable: navigating to them, including from a deep link, sends the user to the first available screen instead, and any history entries for them are removed. Signing in flips isSignedIn, the layout re-renders, and the protected screens appear without you calling router at all. Signing out does the reverse, which also clears the back stack, so the back gesture can’t reveal a signed-in screen.

\n

useSession is a context like the one you built two lessons ago. Its isLoading covers the moment at startup when Trailhead is still reading the saved token from secure storage (section 4); rendering nothing while the splash screen is up avoids a flash of the sign-in page for users who are already signed in.

\n\n

Deep links

\n

A deep link opens the app on a specific screen. Give Trailhead a URL scheme in app.json:

\n
app.json
{\n  \"expo\": {\n    \"name\": \"Trailhead\",\n    \"scheme\": \"trailhead\"\n  }\n}
\n

Now trailhead://hikes/42 opens the app and renders /hikes/42 with the same Stack you built, including a back button to the log. You get this for free from file-based routing: every route already has a URL. Schemes are part of the native app configuration, so test them in a development build; Expo Go has its own scheme. From a terminal:

\n
Terminal
npx uri-scheme open trailhead://hikes/42 --ios\nnpx uri-scheme open trailhead://hikes/42 --android
\n

Custom schemes have a weakness: any app can claim trailhead://. For links you share on the web, use universal links (iOS) and App Links (Android), which use your own https:// domain and require hosting a small verification file on it. Expo’s linking guide walks through both.

\n\n

How a URL picks a route

\n

When a link arrives, Expo Router compares its path with every route file. Knowing the rules removes the guesswork:

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
RuleExample
Groups like (tabs) add no segment(tabs)/stats.tsx matches /stats
index adds no segmentsettings/index.tsx matches /settings
[name] matches exactly one segmenthikes/[id].tsx matches /hikes/42
[...name] matches one or more remaining segments, as an arraytrails/[...path].tsx matches /trails/alps/mont-blanc
Static beats dynamic beats catch-all/hikes/new picks hikes/new.tsx over hikes/[id].tsx
The query string becomes extra params/hikes/42?units=mi adds units

That ranking is why you can safely add hikes/new.tsx next to hikes/[id].tsx. In the exercise you’ll implement this matcher yourself, which is the fastest way to never be surprised by it again.

\n

That completes navigation. Section 4 connects Trailhead to the outside world: a server, the device’s storage, and its sensors.

\n","toc":[{"id":"sec-1","text":"The add-hike form as a modal","level":2},{"id":"sec-2","text":"Protected routes","level":2},{"id":"sec-3","text":"Deep links","level":2},{"id":"sec-4","text":"How a URL picks a route","level":2}],"takeaways":["A Stack screen with presentation: 'modal' slides up as a sheet on iOS; dismiss it with router.back() after saving.","Stack.Protected with a guard hides routes when the condition is false, so signed-out users can’t reach them, even from a deep link.","A scheme in app.json makes trailhead://hikes/42 open the /hikes/[id] route; custom schemes need a development build, not Expo Go.","When matching a URL, groups and index add no segment, static segments beat dynamic ones, and [...rest] catches whatever is left."],"further":[{"title":"Modals","url":"https://docs.expo.dev/router/advanced/modals/"},{"title":"Protected routes","url":"https://docs.expo.dev/router/advanced/protected/"},{"title":"Linking into your app","url":"https://docs.expo.dev/linking/into-your-app/"}],"quiz":[{"q":"

Trailhead has both src/app/hikes/new.tsx and src/app/hikes/[id].tsx. Which one renders for /hikes/new?

","options":[{"text":"[id].tsx, with id set to “new”, because dynamic routes match anything.","why":"Dynamic routes do match any segment, but a static segment that matches exactly is preferred."},{"text":"Whichever file was created first.","why":"Matching doesn’t depend on file age. It ranks routes by how specific they are."},{"text":"Neither; Expo Router reports a conflict at startup.","why":"Static and dynamic siblings are a normal, supported setup."},{"text":"new.tsx, because a static segment beats a dynamic one.","why":"Correct. /hikes/new matches the static route; /hikes/42 falls through to [id].tsx."}],"answer":3},{"q":"

Signed-out users tap an old email link to trailhead://hikes/42. The hike route sits inside <Stack.Protected guard={isSignedIn}>. What happens?

","options":[{"text":"The hike screen opens, then immediately shows an error.","why":"Protected routes aren’t rendered at all while the guard is false, so the hike screen never mounts."},{"text":"The user lands on the first available screen (Trailhead’s sign-in) instead of the protected route.","why":"Correct. While the guard is false the route is unavailable, and navigation to it is redirected."},{"text":"The app crashes because the route doesn’t exist.","why":"Protected routes are hidden, not deleted; Expo Router handles the attempt gracefully."}],"answer":1},{"q":"

You add a scheme of “trailhead” to app.json and test trailhead://hikes/42 in Expo Go. Nothing opens. Why?

","options":[{"text":"Custom schemes are registered in the app’s native config, so they work in a development or production build of Trailhead, not inside Expo Go.","why":"Correct. Expo Go is a different app with its own scheme; build Trailhead itself to test its links."},{"text":"Schemes must start with https.","why":"Universal links and App Links use https, but custom schemes like trailhead:// are valid too."},{"text":"Deep links only work when the app is already open.","why":"A deep link can cold-start the app and open the matching route directly."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const ROUTES = [\n '(tabs)/index',\n '(tabs)/stats',\n 'settings/index',\n 'settings/units',\n 'hikes/new',\n 'hikes/[id]',\n 'hikes/[id]/photos',\n 'trails/[...path]',\n];\n\n// Return { route, params } for the best matching route file, or null.\nfunction matchRoute(url, routes) {\n const path = url.replace(/^\\//, '');\n const route = routes.find((r) => r === path);\n return route ? { route, params: {} } : null;\n}\n\nconsole.log(JSON.stringify(matchRoute('/hikes/42?units=mi', ROUTES)));\n"},"solution":{"js":"const ROUTES = [\n '(tabs)/index',\n '(tabs)/stats',\n 'settings/index',\n 'settings/units',\n 'hikes/new',\n 'hikes/[id]',\n 'hikes/[id]/photos',\n 'trails/[...path]',\n];\n\nfunction segmentsOf(route) {\n const segs = route.split('/').filter((s) => !/^\\(.+\\)$/.test(s));\n if (segs[segs.length - 1] === 'index') segs.pop();\n return segs;\n}\n\nfunction tryMatch(route, parts) {\n const pattern = segmentsOf(route);\n const params = {};\n let rank = '';\n for (let i = 0; i < pattern.length; i++) {\n const seg = pattern[i];\n const catchAll = seg.match(/^\\[\\.\\.\\.(\\w+)\\]$/);\n const dynamic = seg.match(/^\\[(\\w+)\\]$/);\n if (catchAll) {\n const rest = parts.slice(i);\n if (rest.length === 0) return null;\n params[catchAll[1]] = rest;\n return { route, params, rank: rank + '1' };\n }\n if (i >= parts.length) return null;\n if (dynamic) {\n params[dynamic[1]] = parts[i];\n rank += '2';\n } else if (seg === parts[i]) {\n rank += '3';\n } else {\n return null;\n }\n }\n return pattern.length === parts.length ? { route, params, rank } : null;\n}\n\nfunction matchRoute(url, routes) {\n const [path, query = ''] = url.split('?');\n const parts = path.split('/').filter(Boolean);\n let best = null;\n for (const route of routes) {\n const m = tryMatch(route, parts);\n if (m && (!best || m.rank > best.rank)) best = m;\n }\n if (!best) return null;\n const params = { ...best.params };\n for (const [key, value] of new URLSearchParams(query)) params[key] = value;\n return { route: best.route, params };\n}\n\nconsole.log(JSON.stringify(matchRoute('/hikes/42?units=mi', ROUTES)));\n"},"checks":[{"id":"groups-index","test":"const R = ['(tabs)/index', '(tabs)/stats', 'settings/index', 'settings/units', 'hikes/new', 'hikes/[id]', 'hikes/[id]/photos', 'trails/[...path]']; const m = (u) => matchRoute(u, R); return typeof matchRoute === 'function' && m('/')?.route === '(tabs)/index' && m('/stats')?.route === '(tabs)/stats' && m('/settings')?.route === 'settings/index' && m('/settings/units')?.route === 'settings/units';"},{"id":"dynamic","test":"const R = ['(tabs)/index', '(tabs)/stats', 'settings/index', 'settings/units', 'hikes/new', 'hikes/[id]', 'hikes/[id]/photos', 'trails/[...path]']; const m = (u) => matchRoute(u, R); const a = m('/hikes/42'); const b = m('/hikes/42/photos'); return a?.route === 'hikes/[id]' && a.params.id === '42' && b?.route === 'hikes/[id]/photos' && b.params.id === '42';"},{"id":"static-wins","test":"const R = ['(tabs)/index', '(tabs)/stats', 'settings/index', 'settings/units', 'hikes/new', 'hikes/[id]', 'hikes/[id]/photos', 'trails/[...path]']; const m = (u) => matchRoute(u, R); return m('/hikes/new')?.route === 'hikes/new';"},{"id":"catch-all","test":"const R = ['(tabs)/index', '(tabs)/stats', 'settings/index', 'settings/units', 'hikes/new', 'hikes/[id]', 'hikes/[id]/photos', 'trails/[...path]']; const m = (u) => matchRoute(u, R); const a = m('/trails/alps/mont-blanc'); return a?.route === 'trails/[...path]' && Array.isArray(a.params.path) && a.params.path.join('/') === 'alps/mont-blanc' && m('/trails') === null;"},{"id":"query-slash","test":"const R = ['(tabs)/index', '(tabs)/stats', 'settings/index', 'settings/units', 'hikes/new', 'hikes/[id]', 'hikes/[id]/photos', 'trails/[...path]']; const m = (u) => matchRoute(u, R); const a = m('/hikes/7?units=mi'); return a?.route === 'hikes/[id]' && a.params.id === '7' && a.params.units === 'mi' && m('/stats/')?.route === '(tabs)/stats';"},{"id":"no-match","test":"const R = ['(tabs)/index', '(tabs)/stats', 'settings/index', 'settings/units', 'hikes/new', 'hikes/[id]', 'hikes/[id]/photos', 'trails/[...path]']; const m = (u) => matchRoute(u, R); return m('/nope') === null && m('/settings/units/extra') === null;"}],"title":"Match a deep link to a route file","prompt":"

Implement matchRoute(url, routes) the way Expo Router picks a screen for a deep link. routes are file paths without .tsx (see ROUTES). Return { route, params } for the best match, or null.

\n\n","hints":["Turn each route into its URL segments first: drop (group) segments and a trailing index. Split the URL path with .split('/').filter(Boolean).","Walk the route’s segments alongside the URL’s. A literal must equal the URL segment; [x] captures it; [...x] captures parts.slice(i) and ends the match. Afterwards, the lengths must line up.","To rank, build a string per match with one digit per segment (3 static, 2 dynamic, 1 catch-all) and keep the match with the largest string. new URLSearchParams(query) iterates the query pairs."],"explanation":"

The solution normalizes each route file into URL segments, tries to match it segment by segment while collecting params, and scores each segment so that more specific routes win: comparing the score strings ranks static before dynamic before catch-all from left to right. That’s why /hikes/new reaches hikes/new.tsx while /hikes/42 falls through to hikes/[id].tsx, and why the screen must still validate id: the matcher accepts any segment at all.

\n","checkLabels":{"groups-index":"Groups and index files add no URL segment","dynamic":"Dynamic segments match and become string params","static-wins":"A static route beats a dynamic one","catch-all":"Catch-all routes collect the remaining segments as an array","query-slash":"Query strings become params and trailing slashes are ignored","no-match":"Unknown or too-long paths return null"}},"words":724,"readMinutes":3}