What is Expo Router?

What it is

Expo Router is a library from the Expo team built on top of React Navigation. It follows the file based routing idea popular in web frameworks: the folder structure under app is the navigation structure of the app. Every screen is automatically addressable by a URL, which means a link in an email, a notification or another app can open a specific screen. Expo's documentation describes it as working across Android, iOS and the web from one codebase.

How it works

Files become routes; folders become segments of the URL. A file named _layout.tsx wraps the routes beside it and chooses how they are shown, commonly as a Stack, where screens slide over each other, or as Tabs, where a tab bar switches between them. A folder whose name is in parentheses, such as (tabs), is a route group: it organises files without adding to the URL. Square brackets make a dynamic segment, so classes/[id].tsx serves every class page. Navigation uses a Link component or a router object, much like links on a website.

When it matters

Expo Router matters to anyone building a new Expo app, because it is the default in Expo's project templates and handles links for free. It matters for business apps that are reached from outside: a booking confirmation email with a link to the booking, a QR code on a counter that opens the menu, or a website button that opens the same screen in the installed app. And it matters when an app and a website share code, since routes look the same on both.

Common mistakes

Putting screens in the wrong group so they appear as unexpected tabs. Forgetting that every file in app becomes a route, including helper components saved there by mistake. Naming two files that resolve to the same URL. Hiding a screen from the tab bar but leaving it reachable by URL without checking sign in. Passing large objects in URL parameters instead of an id. And assuming a deep link works on a real phone without setting up the app's scheme and, for https links, universal links and app links.

Where it shows up in OneCraft

Phone apps built with OneCraft are Expo projects using Expo Router, React Native Reusables and Uniwind, each in its own repository. A generated app has up to 14 screens and 3 to 5 tabs ending with an Account tab, where people choose Light, Dark or Follow device appearance, find a notifications switch, sign in or out when the app has a database, and read About. Every tab is checked at 390 and 768 pixels wide and Home in dark mode. The project downloads as a zip with app.json filled.

Questions people ask