Mobile App Development

Adopting Expo Router for a React Native app's navigation

APP

File-based routing has been a familiar pattern from the web framework world for a while, and Expo Router brought the same idea to React Native navigation this year. Instead of manually registering every screen and its navigation relationships in a central configuration file, the folder structure under the app directory directly defines the navigation tree, with nested folders producing nested navigators automatically.

Navigation structure now mirrors the file tree directly, which has made onboarding new developers onto mobile projects noticeably faster since the routing is discoverable just by browsing the folder structure rather than needing to trace through a separate navigation configuration file to understand how screens connect to each other. On our most recent client project, a new team member was able to find and modify a specific screen's navigation behavior within their first day, something that would typically have taken longer under our previous React Navigation setup, where understanding the full navigation tree required reading a config file that had grown fairly large over the project's lifetime.

Deep linking configuration, which used to require manually specifying a mapping between URL paths and screens, now falls out of the file structure almost for free, since the same paths that define in-app navigation also define the linkable URL scheme by default. That removed an entire category of configuration drift we used to see, where a screen would get added or renamed and the separate deep-linking config would quietly fall out of sync until someone noticed a broken link months later.

The migration from our previous React Navigation setup on an existing project took longer than starting fresh would have, since retrofitting file-based routing onto navigation logic that wasn't originally structured with that pattern in mind meant some real refactoring rather than a mechanical conversion. For new projects, though, we're now defaulting to Expo Router from day one, and the combination of faster onboarding and simpler deep linking has made it an easy recommendation for any new React Native work going forward.

Nested layouts, where a folder can define a shared header, tab bar, or wrapper that applies to every screen beneath it, turned out to be one of the more genuinely useful patterns once we started leaning on it deliberately rather than treating it as an incidental feature of the file structure. A client project with several distinct sections, each needing its own tab bar and header treatment, mapped cleanly onto nested route groups, which meant far less repeated boilerplate across screens than our previous approach of manually wiring the same header configuration into every screen that needed it.

One rough edge worth flagging: because the routing convention is still relatively new, a couple of third-party navigation-aware libraries we'd relied on under React Navigation hadn't fully caught up with equivalent support for Expo Router's conventions at the time of our migration. We worked around the gaps with small compatibility shims rather than waiting for official support, which added a modest amount of extra code but didn't block the migration meaningfully.

← Back to the journal

Have a project in mind?
Let’s talk.

Tell us where you are and where you want to go. We'll map the fastest route between the two.

Currently accepting new clients