Expo RN Starter

Single Expo / React Native starter app with Expo Router, NativeWind, and Gluestack UI.

Tech Stack

• Expo SDK 54
• React 19 + React Native 0.81.x
• TypeScript (strict)
• Routing: expo-router
• Styling: NativeWind v4 + Tailwind + Gluestack UI v3
• Path alias: @/*

Requirements

• Node.js 18+ recommended
• Yarn (project uses yarn scripts)

Setup

yarn install

Run

# Dev server
yarn start

# Platforms
yarn run ios
yarn run android
yarn run web

Quality Checks

# Lint
yarn run lint

# Types
npx tsc --noEmit

# Tests (Jest)
yarn test                                  # watch
npx jest --no-watchAll                     # run once
npx jest path/to/file.test.ts              # single test file
npx jest -t "test name"                    # single test by name
npx jest -t "test name" path/to/file.test.ts  # single test name in a file
npx jest --watch path/to/file.test.ts      # watch a single test file

Notes:

• Jest uses passWithNoTests: true so a fresh starter can run npx jest --no-watchAll without failing.

Project Structure

• Routes (expo-router): app/**
  • Root layout: app/_layout.tsx
  • Tabs layout: app/(tabs)/_layout.tsx
  • Home: app/(tabs)/index.tsx -> components/screens/home/HomeScreen.tsx
  • Settings: app/(tabs)/settings.tsx -> components/screens/settings/SettingsScreen.tsx
  • Web shell: app/+html.tsx
  • Not found: app/+not-found.tsx
• Screens: components/screens/**
• Layouts: components/layouts/**
• Design system: components/ui/**
• Assets: assets/images/**
• Global styles: global.css

Conventions

• Prefer @/* alias imports; avoid deep relative paths.
• Keep route files thin; screens live in components/screens/**.
• Prefer Gluestack components over React Native primitives.
• Use NativeWind className and semantic tokens (avoid hardcoded colors).
• TypeScript is strict; avoid any and unnecessary as casting.

Environment Variables

• Keep secrets out of source control.
• Store tokens/endpoints in .env files if introduced and document them.

Useful Searches

# Find routes
rg -n "export default" app --glob "*.tsx"

# Find components
rg -n "export (default )?function|export const" components --glob "*.tsx"

# Find Gluestack usage
rg -n "from \"@/components/ui" components --glob "*.tsx"

# Find tests
rg -n "\.test\." components app __tests__ --glob "*.ts*"

Definition of Done (Before PR)

• yarn run lint
• npx tsc --noEmit
• npx jest --no-watchAll