BNA

BNA UI
...

Expo

PreviousNext

Scaffold a new Expo app with BNA UI — Expo Router, light and dark theming, and thirteen components already wired up.

Use this if you are starting a new app and do not need a backend yet.

Create the app

pnpm dlx bna-ui init my-app

The CLI asks for a project name if you leave it out, and detects your package manager from how you invoked it. Pass . as the name to scaffold into the current directory.

Move into the project and start it

cd my-app
npx expo start

Open it

Press i for the iOS simulator, a for Android, or w for web. The tab layout, theming and mode toggle all work out of the box.

What you get

app/                 Screens and routing (Expo Router — files become routes)
├── (tabs)/          Tab navigator: home, search, settings
├── sheet.tsx        A modal sheet route
└── _layout.tsx      Root layout: ThemeProvider
components/ui/       avoid-keyboard, button, card, icon, input, input-otp,
                     link, mode-toggle, scroll-view, spinner, tabs, text, view
hooks/               useColor, useColorScheme, useKeyboardHeight, useModeToggle
providers/           mode-provider.tsx, theme-provider.tsx
theme/               colors.ts, globals.ts

Those thirteen components are the same source bna-ui add installs — they are copied into your project, not imported from a package, so you own them and can edit them freely.

Add more components

pnpm dlx bna-ui add avatar

Hooks, theme files and npm dependencies come along automatically. Run it with no arguments to browse everything interactively:

pnpm dlx bna-ui add

Flags

FlagWhat it does
--skip-installScaffold without installing npm packages
--npm --yarn --pnpm --bunForce a package manager

pnpm

Scaffolds come with an .npmrc and a pnpm-workspace.yaml pinning pnpm to the hoisted linker. Expo needs a flat node_modules, and pnpm's default isolated layout leaves expo start unable to resolve metro-runtime. Keep both files — details.

Next

InstallationExpo + Convex