An introduction to routing in react native apps with Expo Router

1. Exploring Navigation in React Native apps
with
Expo Router v1 and v2
Brian Wachira
&
Tony Kharioki

3. What is Expo Router?
In short, it is a File Based Router for native apps.
What does this mean?
- By simply creating a file in our app
directory, those files are automatically
mapped into routes/screens
- It brings the best of file-system routing
concepts from web to a universal
application. Now your routing works
across all platforms (Android, iOS, and

4. Why should I use Expo Router?
• It’s a simple mental model - the file system routing is a well-known and well-
understood concept that maps a URL path to a specific file in a project directory
i.e. its kinda like Next’s pages router or routing in a Remix app.
• When using React Navigation manually, you have to define routes and the linking
config which can cause errors and its difficult to validate that all your routes work.
With file-based router, routes and linking config are automatically
generated and they “Just Work”.
• Easy to refactor - you can move files around without having to update any imports
or routing components.

6. What are the main features of Expo Router?
• Its Native - It leverages the power of React Navigation suite and adds on more core routing concepts to work
across web and native.
• Every route is shareable - every screen is automatically deep linkable.
• Offline-first - Handles all incoming native URLs without a network connection or server. Unlike web apps, native
apps are all expected to work offline. This means that the app must be able to handle any incoming URL without a
network connection or server. This is done by implementing uniting features across Expo SDK to Expo CLI to the
Metro bundler.
• Routes are automatically optimized with lazy-evaluation in production, and deferred bundling in development.
• Universal Fast Refresh across Android, iOS, and web, along with artifact memoization in the bundler to keep
you moving fast at scale.
• Unified navigation structure - ability to drop-down to platform-specific APIs at the route level.
• Discoverable - Expo Router enables build-time static rendering on web, and universal linking to native. Meaning
your app content can be indexed by search engines.

7. What are the main routing conventions of Expo Router?
• Basic Routes - the route matches the name of the file,
e.g `about.tsx` becomes `/about`
• Layout Routes - adding a `_layout.tsx` file in any directory will wrap all
children in the directory allowing for shared UI elements e.g. headers and
tab bars.
• Dynamic Routes - these enable variable matching of segments. You can
generate routes based on certain parameters of data.
• Group Routes - we use Groups to organise sections of the app. When we
wrap a directory in parentheses e.g. (group), it does so without adding
additional segments to the URL
• Shared Routes - you can present different components simultaneously
while leveraging the same URL for both
app://about

8. Some more conventions of Expo Router?
• Linking - with Expo Router you move between
pages using URLs and a `<Link />` component
• 404 Pages - Expo router automatically handles
missing routes by default.
• SplashScreen - splash screen visibility is
automatically controlled while navigation UI is
rendering, - thus preventing the “white flash” from
showing.

10. Expo Router V2 is even better…
• src/app directory - now you can collect your source code in one place
• Automatic Typescript - developers do not have to manually define the typescript
definitions. Expo CLI now has first-class support for `tsconfig.json` paths and baseURL and
continuously generates static type definitions for every route in your app automatically.
• Static routes - now has first-class support for build-time static generation which enables SEO
on web. All routes can now be rendered to static HTML, which can be hosted from most
standard web servers.
- to improve SEO even further there’s a new `expo-router/head` component which can be used
to define static dynamic head metadata e.g title
- a new `app/+html.js` file which can be used to configure the default HTML wrapper for each
route e.g when you want to add global tags like google analytics which are outside the scope of
react

11. • Aliased imports - Expo CLI supports
path aliases in your project’s
`tsconfig.json` automatically.
This enables you to import modules using
custom alias instead of relative paths.

12. • CSS and Styling - With static rendering,
hydration issues tend to happen you use JS to
dynamically configure styles. Instead, you should
use CSS and media queries for dynamic
properties on web.
Now Expo has support for:
- Global CSS and CSS inside node modules
- Sass and SCSS
- PostCSS configuration
- Tailwind CSS
You can now import files just like in
any
modern react framework

13. More cool stuff…
• The `web.favicon` field in app.json can now be used to generate favicon images
automatically at build time.
• The default empty layout now uses a safe area view.
• We no longer need to define a default scheme in the app.json to use expo router
• There’s a new `router.canGoBack()` function for detecting if there’s valid history for
using `router.back()`
• There’s now support for Expo Head on iOS - this configures deep-native functionality
often found in stock-Apple apps which provides for new features like handoff between
web and native.

14. Okay. Now let’s do some coding
with Kharioki

16. Some Prerequisites
• Node.js - (preferably even numbered LTS releases) - you can use nvm for this
• Git
• Watchman - for mac and Linux users (this one watches files and triggers actions)
• Yarn - because its faster than npm and npx
• VS Code Editor - and use the VS Code Expo Extension (for autocomplete)
• Expo CLI
• Expo Go - a free client for testing RN apps without building locally
• Basic knowledge of:
- react-native & react
- expo
- typescript
- react navigation - after all this is a talk on navigation

17. So, previously we’d (still can) do something like this
and then define a stack navigator like so…

18. With Expo router v1
and now with v2

19. Simple Page…
and now same page as a stack screen

20. Find Us On Our Socials
https://twitter.com/kharioki
https://github.com/kharioki
https://twitter.com/mr_brianwachira
https://github.com/brianwachira/