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

Technologies

⚙️ Node.js, 🟦 TypeScript, ⚛️ React, 📱 React Native, 🚀 Expo, 🔐 Better Auth, 🌿 Ficus UI, 🌴 Tanstack Form, 🌴 Tanstack Query, 👋 Hey API

Requirements

• Node.js >= 22
• pnpm

Getting Started

pnpm create start-ui -t native myApp

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

Installation

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

Environment variables

🚨 Using Expo Go, should not be localhost, use public IP instead

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`)

API SDK generation

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 } }));

Run

pnpm dev          # To use Expo Go
pnpm dev:ios      # To use a local ios build
pnpm dev:android  # To use a local android build

Generate custom icons components from svg files

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

Warning

All svg icons should be svg files prefixed by icon- (example: icon-externel-link) with square size and filled with #000 color (will be replaced by currentColor).

EAS Preview

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

1. Setup Expo access token
   • Create it: https://expo.dev/accounts/{account}/settings/access-tokens
   • Add it as GitHub repository secrets: https://github.com/xxx/xxx/settings/secrets/actions
2. Add GitHub repository variables: https://github.com/xxx/xxx/settings/variables/actions
   • API_URL
   • AUTH_URL
   • OPENAPI_URL
3. Setup Expo project: https://expo.dev/
   • Create your project
   • Get project's id
   • Set as EXPO_PROJECT_ID in app.config.ts
4. Setup eas
   • eas login
   • eas init --id {projectid}
   • eas update:configure