Expo Router v3 Boilerplates With UI (Take the Routing)

Expo Router brings file-based routing to React Native: your folder structure becomes your navigation, the way Next.js works on the web. A boilerplate built on it gives you that routing plus some starter UI, so you can skip wiring navigation by hand. The short answer is, use Expo Router for clean, file-based navigation, pick a lightweight boilerplate for the structure (not a heavy one you fight), and build your actual screens from a free VP0 design. The routing is the value; the bundled UI in most boilerplates is a placeholder you will replace anyway.

Why file-based routing helps

Hand-wiring navigation (stacks, tabs, params) is fiddly and easy to get inconsistent. Expo Router replaces that with a file-based convention: a file in your app directory is a route, folders are nesting, and layouts wrap groups, which makes navigation predictable and reduces boilerplate. A starter built on it gives you a working tab-and-stack structure, deep linking, and typed routes out of the box. That structure is genuinely useful; what you do not want is a boilerplate whose bundled screens are a heavy, opinionated UI you then have to tear out. Cleaner navigation also means fewer bugs in one of the highest-traffic parts of the app, and a smooth first run matters because typical day-one retention is only around 25%. Take the routing, bring your own screens.

How to use an Expo Router boilerplate well

VP0 is a free iOS design library for AI builders. Start from a lightweight Expo Router boilerplate for the routing skeleton (tabs, stacks, a layout), then build each screen from a VP0 design with Cursor or Claude Code in React Native. Map your file structure to your app’s navigation (a tabs folder, nested stacks per tab), use Expo Router’s layouts for shared chrome, and keep the screens themselves yours. Vet any boilerplate’s dependencies before adopting it. The result: clean navigation you did not hand-wire, plus screens that look like your app, not the starter. For the auth-and-payments side of a starter, see React Native boilerplate with auth and payments UI.

What to take from a boilerplate (and what to replace)

Here is the split.

Take	Replace
File-based route structure	Bundled placeholder screens
Tab and stack layout	Default theme and styling
Deep linking setup	Generic components
Typed routes	Opinionated UI you did not choose
Sensible config	Heavy unused dependencies

A worked example

Say you want a tabbed app fast. Start from an Expo Router boilerplate to get the tabs-and-stacks structure and deep linking, then delete its placeholder screens and build yours from VP0 designs (home, detail, profile) with Cursor. Use a layout file for the tab bar and shared header. You kept the routing skeleton and shipped your own screens, no hand-wiring, no inherited UI. Because routing is convention-based, adding a screen later is just adding a file, which keeps the app easy to grow. For the navigation feel itself, see how to build an iOS app with AI, and for styling the screens, React Native Paper modern UI kit.

Common mistakes

The most common mistake is keeping a boilerplate’s heavy bundled UI instead of replacing it with your own screens. The second is fighting a complex boilerplate when a lightweight one (just routing) would do. The third is not mapping the file structure thoughtfully, leading to messy nesting. The fourth is ignoring layouts, so shared chrome is duplicated per screen. The fifth is adopting a boilerplate without vetting its dependencies.

Key takeaways

• Expo Router gives file-based, predictable navigation; a folder is a route, layouts wrap groups.
• A boilerplate’s value is the routing skeleton; the bundled UI is usually a placeholder to replace.
• Take the structure (tabs, stacks, deep linking) and build your screens from a free VP0 design.
• Pick a lightweight boilerplate, map the file structure thoughtfully, and use layouts for shared chrome.

Frequently asked questions

How do I use an Expo Router v3 boilerplate with UI? Take the routing skeleton (file-based tabs, stacks, layouts, deep linking) and replace the bundled placeholder screens with your own, built from a free VP0 design. The routing is the value; bring your own UI.

What is file-based routing? A convention where your folder structure defines navigation: a file is a route, folders nest, and layouts wrap groups. Expo Router brings this to React Native, reducing hand-wired navigation.

Should I keep the boilerplate’s screens? Usually no. Most bundled UI is a placeholder. Keep the structure and config, and build your actual screens from a VP0 design so the app looks like yours.

How do I pick an Expo Router boilerplate? Prefer a lightweight one that gives you routing and config without a heavy opinionated UI, and vet its dependencies before adopting it.