🚀 Start UI [native] is an opinionated native starter repository created & maintained by the BearStudio Team and other contributors. It represents our team's up-to-date stack that we use when creating native apps for our clients.

⚙️ Node.js, 🟦 TypeScript, ⚛️ React, 📱 React Native, 🚀 Expo, 🔐 Better Auth, 🖌️ Uniwind, 🧱 React Native Reusables, 🌴 Tanstack Form, 🌴 Tanstack Query, 👋 Hey API

• Node.js >= 22
• pnpm

pnpm create start-ui -t native myApp

That will scaffold a new folder with the latest version of 🚀 Start UI [native] 🎉

cp .env.example .env # Setup your env variables
cp .vscode/settings.example.json .vscode/settings.json  # (Optionnal) Setup your VS Code
pnpm install # Install dependencies

EXPO_PUBLIC_BASE_URL # Base URL of your server, usefull if you are using Start UI [web]

# OPTIONAL TO OVERRIDE
EXPO_PUBLIC_AUTH_URL # Better-auth url (default `${EXPO_PUBLIC_BASE_URL}/api/auth`)
EXPO_PUBLIC_OPENAPI_URL # OpenAPI contract URL (default `${EXPO_PUBLIC_BASE_URL}/openapi/app/schema`)

pnpm gen:api

A new folder /src/lib/hey-api/generated will be created with stuff like to combine use Tanstack Query to fetch data, based on env variables.

For example

import { api } from '@/lib/hey-api/api';

useQuery(api.bookGetByIdOptions({ path: { id: props.bookId } }));

pnpm dev

App name and bundle ID come from app.config.ts, evaluated at prebuild time. Each script runs prebuild --clean with the appropriate APP_ENV, then builds.

# Development (debug build, dev client)
pnpm dev:build:ios
pnpm dev:build:android

# Staging (release build, internal testing)
pnpm build:staging:ios
pnpm build:staging:android

# Production (release build, store-like)
pnpm build:production:ios
pnpm build:production:android

You can use @dev-plugins pressing Shift + m in your Expo terminal.

Storybook is managed as a specific mode of the app that is launch apart in port 8083

pnpm dev:storybook   # To run app in storybook mode

Put the custom svg files into the app/components/icons/svg-sources folder and then run the following command:

pnpm gen:icons

If you want to use the same set of custom duotone icons that Start UI is already using, checkout Phosphor

The GitHub Actions workflows require the following configuration.

Add at Settings → Secrets and variables → Actions → Variables:

Add at Settings → Secrets and variables → Actions → Secrets:

Create an Expo token at expo.dev/accounts/{account}/settings/access-tokens.

For APP_STORE_CONNECT_API_KEY: export your App Store Connect API key as base64 (base64 -i AuthKey_XXX.p8) and store the result as the secret. The prepare-production workflow decodes it at runtime for eas submit.

For the Release Production workflow, also configure eas.json submit.production with your App Store Connect credentials (ascAppId, ascApiKeyId, ascApiKeyIssuerId, ascApiKeyPath), and set the ASC_API_KEY_ID variable to match your key ID (used in the key filename).

To be able to use previews on PR, you have to setup your project with EAS

1. Configure GitHub variables and secrets (see above)
2. Setup Expo project: https://expo.dev/

• Create your project
  • Get project's id
  • Set as EAS_PROJECT_ID in app.config.ts

3. Setup eas

• eas login
  • eas init --id {projectid}
  • eas update:configure