SlideShare a Scribd company logo

Expo Router V2

An introduction to routing in react native apps with Expo Router

1 of 21
Download to read offline
Exploring Navigation in React Native apps
with
Expo Router v1 and v2
Brian Wachira
&
Tony Kharioki
Expo Router V2
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
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.
Expo Router V2
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.

Recommended

How native is React Native? | React Native vs Native App Development
How native is React Native? | React Native vs Native App DevelopmentHow native is React Native? | React Native vs Native App Development
How native is React Native? | React Native vs Native App DevelopmentDevathon
 
Python for the Network Nerd
Python for the Network NerdPython for the Network Nerd
Python for the Network NerdMatt Bynum
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Nir Elbaz
 
How Netflix uses Python? Edureka
How Netflix uses Python? EdurekaHow Netflix uses Python? Edureka
How Netflix uses Python? EdurekaEdureka!
 
S60 3rd FP2 Widgets
S60 3rd FP2 WidgetsS60 3rd FP2 Widgets
S60 3rd FP2 Widgetsromek
 
Android Design Patterns
Android Design PatternsAndroid Design Patterns
Android Design PatternsGodfrey Nolan
 
python presntation 2.pptx
python presntation 2.pptxpython presntation 2.pptx
python presntation 2.pptxArpittripathi45
 

More Related Content

What's hot

Best Practices in Web Service Design
Best Practices in Web Service DesignBest Practices in Web Service Design
Best Practices in Web Service DesignLorna Mitchell
 
Introduction to Development for the Internet
Introduction to Development for the InternetIntroduction to Development for the Internet
Introduction to Development for the InternetMike Crabb
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
An Authentication and Authorization Architecture for a Microservices World
An Authentication and Authorization Architecture for a Microservices WorldAn Authentication and Authorization Architecture for a Microservices World
An Authentication and Authorization Architecture for a Microservices WorldVMware Tanzu
 
HTML + CSS Examples
HTML + CSS ExamplesHTML + CSS Examples
HTML + CSS ExamplesMohamed Loey
 
Running High-Speed Serverless with nuclio
Running High-Speed Serverless with nuclioRunning High-Speed Serverless with nuclio
Running High-Speed Serverless with nuclioiguazio
 
Build a Website Using HTML + CSS
Build a Website Using HTML + CSSBuild a Website Using HTML + CSS
Build a Website Using HTML + CSSAnna Cook (she/her)
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markertersSEO SKills
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen Derin Dolen
 
HTML Text formatting tags
HTML Text formatting tagsHTML Text formatting tags
HTML Text formatting tagsHimanshu Pathak
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react nativeModusJesus
 
Web components
Web componentsWeb components
Web componentsGil Fink
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSDeepak Upadhyay
 

What's hot (20)

Best Practices in Web Service Design
Best Practices in Web Service DesignBest Practices in Web Service Design
Best Practices in Web Service Design
 
PHP
PHPPHP
PHP
 
Introduction to Development for the Internet
Introduction to Development for the InternetIntroduction to Development for the Internet
Introduction to Development for the Internet
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
An Authentication and Authorization Architecture for a Microservices World
An Authentication and Authorization Architecture for a Microservices WorldAn Authentication and Authorization Architecture for a Microservices World
An Authentication and Authorization Architecture for a Microservices World
 
short cut
short cutshort cut
short cut
 
HTML + CSS Examples
HTML + CSS ExamplesHTML + CSS Examples
HTML + CSS Examples
 
Running High-Speed Serverless with nuclio
Running High-Speed Serverless with nuclioRunning High-Speed Serverless with nuclio
Running High-Speed Serverless with nuclio
 
Build a Website Using HTML + CSS
Build a Website Using HTML + CSSBuild a Website Using HTML + CSS
Build a Website Using HTML + CSS
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markerters
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
HTML Text formatting tags
HTML Text formatting tagsHTML Text formatting tags
HTML Text formatting tags
 
Programming with Python
Programming with PythonProgramming with Python
Programming with Python
 
Hushang Gaikwad
Hushang GaikwadHushang Gaikwad
Hushang Gaikwad
 
Php Ppt
Php PptPhp Ppt
Php Ppt
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 
API for Beginners
API for BeginnersAPI for Beginners
API for Beginners
 
Web components
Web componentsWeb components
Web components
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
 
EVOLVE'13 | Keynote | Roy Fielding
EVOLVE'13 | Keynote | Roy FieldingEVOLVE'13 | Keynote | Roy Fielding
EVOLVE'13 | Keynote | Roy Fielding
 

Similar to Expo Router V2

Introduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureIntroduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureColin Mackay
 
The next step from Microsoft - Vnext (Srdjan Poznic)
The next step from Microsoft - Vnext (Srdjan Poznic)The next step from Microsoft - Vnext (Srdjan Poznic)
The next step from Microsoft - Vnext (Srdjan Poznic)Geekstone
 
Using and extending Alfresco Content Application
Using and extending Alfresco Content ApplicationUsing and extending Alfresco Content Application
Using and extending Alfresco Content ApplicationDenys Vuika
 
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)Arrow Consulting & Design
 
Nasdanika Foundation Server
Nasdanika Foundation ServerNasdanika Foundation Server
Nasdanika Foundation ServerPavel Vlasov
 
Open shift and docker - october,2014
Open shift and docker - october,2014Open shift and docker - october,2014
Open shift and docker - october,2014Hojoong Kim
 
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Mack Hardy
 
Nike pop up habitat
Nike pop up   habitatNike pop up   habitat
Nike pop up habitatChef
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...Mark Leusink
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...Mark Roden
 
MyMobileWeb Certification Part I
MyMobileWeb Certification Part IMyMobileWeb Certification Part I
MyMobileWeb Certification Part Icrdlc
 
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...Paul Jensen
 
Asp. net core 3.0 build modern web and cloud applications (top 13 features +...
Asp. net core 3.0  build modern web and cloud applications (top 13 features +...Asp. net core 3.0  build modern web and cloud applications (top 13 features +...
Asp. net core 3.0 build modern web and cloud applications (top 13 features +...Katy Slemon
 
Onion Architecture with S#arp
Onion Architecture with S#arpOnion Architecture with S#arp
Onion Architecture with S#arpGary Pedretti
 

Similar to Expo Router V2 (20)

Introduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureIntroduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azure
 
The next step from Microsoft - Vnext (Srdjan Poznic)
The next step from Microsoft - Vnext (Srdjan Poznic)The next step from Microsoft - Vnext (Srdjan Poznic)
The next step from Microsoft - Vnext (Srdjan Poznic)
 
Using and extending Alfresco Content Application
Using and extending Alfresco Content ApplicationUsing and extending Alfresco Content Application
Using and extending Alfresco Content Application
 
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)
 
Javascript Basic RESTful
Javascript Basic RESTfulJavascript Basic RESTful
Javascript Basic RESTful
 
newSkills_09
newSkills_09newSkills_09
newSkills_09
 
Nasdanika Foundation Server
Nasdanika Foundation ServerNasdanika Foundation Server
Nasdanika Foundation Server
 
Open shift and docker - october,2014
Open shift and docker - october,2014Open shift and docker - october,2014
Open shift and docker - october,2014
 
Short-Training asp.net vNext
Short-Training asp.net vNextShort-Training asp.net vNext
Short-Training asp.net vNext
 
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
 
Nike pop up habitat
Nike pop up   habitatNike pop up   habitat
Nike pop up habitat
 
Intro to Sails.js
Intro to Sails.jsIntro to Sails.js
Intro to Sails.js
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 
MyMobileWeb Certification Part I
MyMobileWeb Certification Part IMyMobileWeb Certification Part I
MyMobileWeb Certification Part I
 
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
 
Asp. net core 3.0 build modern web and cloud applications (top 13 features +...
Asp. net core 3.0  build modern web and cloud applications (top 13 features +...Asp. net core 3.0  build modern web and cloud applications (top 13 features +...
Asp. net core 3.0 build modern web and cloud applications (top 13 features +...
 
Onion Architecture with S#arp
Onion Architecture with S#arpOnion Architecture with S#arp
Onion Architecture with S#arp
 
Angular js workshop
Angular js workshopAngular js workshop
Angular js workshop
 

Expo Router V2

  • 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/