# Expo Router v3 Boilerplates With UI (Take the Routing)

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-30, updated 2026-06-02. 4 min read.
> Source: https://vp0.com/blogs/expo-router-v3-boilerplates-with-ui

The routing is the value; the bundled UI in most boilerplates is a placeholder you'll replace anyway.

**TL;DR.** Expo Router brings file-based routing to React Native (a folder is a route, layouts wrap groups). A boilerplate's value is that routing skeleton, not its bundled UI. Take the structure (tabs, stacks, deep linking) from a lightweight boilerplate, and build your actual screens from a free VP0 design. Vet dependencies before adopting.

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](https://docs.expo.dev/router/introduction/) 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%](https://getstream.io/blog/app-retention-guide/). 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](https://reactnative.dev/). 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](/blogs/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](/blogs/how-to-build-an-ios-app-with-ai/), and for styling the screens, [React Native Paper modern UI kit](/blogs/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.

## 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.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*