Expo Router V2

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

2. 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 Web)

3. 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.

4. 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.

5. 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

6. 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.

7. 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

8. 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.

9. 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

10. 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.

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

12. 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

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

14. With Expo router v1 and now with v2

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

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

17. THANKS