Your app/ folder is your information architecture

Information architecture is the deliverable everyone nods along to and nobody enforces. You draw the sitemap in Figma. A developer builds the navigator tree in code. Six weeks later the two have quietly drifted, and onboarding someone new takes a thirty-minute explanation of why Settings lives inside the Account stack when the design has it as a top-level tab.

Expo Router's file-based routing removes that gap. Not by adding process, but by making the folder structure the thing both sides read.

The folder is the sitemap

Here is the shape of a real app:

app/
├── _layout.tsx
├── (tabs)/
│   ├── _layout.tsx
│   ├── index.tsx           # Home
│   ├── explore.tsx         # Explore
│   └── profile/
│       ├── _layout.tsx
│       ├── index.tsx
│       ├── edit.tsx
│       └── settings.tsx
├── (auth)/
│   ├── _layout.tsx
│   ├── login.tsx
│   └── signup.tsx
└── modal.tsx

Open that in any file explorer and the app's shape is visible without reading a line of TypeScript. Three tabs. A nested profile section. An auth flow in its own gated group. A modal at the top level, because it can be presented from anywhere.

Now compare it to RootNavigator.tsx → TabNavigator.tsx → ProfileStack.tsx. The same information exists, spread across three files, and none of them show the shape at a glance. A designer can't open those files and learn anything. They can open the folder tree.

Moving a screen is moving a file

Say you want to promote Settings out of Profile and up to a top-level tab.

mv app/\(tabs\)/profile/settings.tsx app/\(tabs\)/settings.tsx

That's the change. No navigator config to update, no linking config to rewrite, no screenOptions to migrate. The route is now /settings instead of /profile/settings, and with typed routes turned on, every router.push that pointed at the old path either autocompletes to the new one or gets flagged by TypeScript before it ships.

The design intent — this should be top-level — becomes one commit. That matters more than it sounds. When a structural change costs an afternoon of navigator surgery, it doesn't get made. It gets deferred, and the sitemap becomes aspirational.

Layouts are where design lives

Each _layout.tsx defines the header, the tab bar, the presentation style, and the safe-area handling for everything beneath it. That makes it the single file that answers the questions design review actually asks: what does someone see when they enter this section? What's the back affordance? What's the visual container?

In a navigator-based app, those answers are scattered across screenOptions, tab bar props, and headerLeft overrides on individual screens. Reviewing them as a designer means asking a developer to narrate the code. With _layout.tsx, it's one file per section, and you can read it.

A five-minute IA review

We run this weekly. Design and engineering open the app/ folder together and ask three questions:

1. Does the folder shape still match the sitemap?
2. Are there orphaned routes — files with no entry point in the UI?
3. Has any _layout.tsx drifted from its section-header spec?

It used to take the better part of an hour on a navigator-based project, mostly spent reconstructing the tree from three files before anyone could evaluate it. Now the reconstruction step is free.

What we catch is unglamorous and worth catching: the profile stack that grew a fifth screen nobody remembers adding, the modal that got promoted to a full screen but kept its presentation: 'modal' prop, the route that survived a feature cut.

The part that isn't automatic

File-based routing makes drift visible. It doesn't stop it. Groups like (tabs) and (auth) don't appear in the URL, so the folder tree and the navigation model can still diverge if you nest groups aggressively. And a folder structure that mirrors your sitemap perfectly can still describe a bad sitemap.

What changes is the cost of noticing. When the IA is a file tree, anyone on the team can audit it in a minute — and the thing that stops IA reviews from happening is almost never disagreement. It's that nobody can see the current state clearly enough to have the argument.

If you're leading design on a React Native app and you've never opened the app/ folder, open it. It's the most honest artifact you have.

---

Suraj from the RapidNative Team. We build RapidNative, which generates real React Native and Expo projects from a prompt — file-based routing included.