Your First Mobile App

What is Mobile Development with Grit?

Grit scaffolds a monorepo that contains both a Go API and an Expo React Native app. You write React components that compile to native iOS and Android code. The Go API is exactly the same as in web projects — same routes, same services, same database. Only the frontend is different.

• • The Go API runs on your server — same as a web project
• • The Expo app runs on a phone (or emulator) and calls the API over HTTP
• • Shared types keep the API and app in sync
• • One codebase, two platforms (iOS + Android)

Prerequisites

You need the same tools as a web project, plus a few mobile-specific ones:

Scaffold a Mobile Project

Use the --mobile flag to scaffold a project with an Expo app instead of (or alongside) a web frontend:

grit new fitness --mobile

This creates a monorepo with the following structure:

fitness/
├── apps/
│   ├── api/           ← Go backend (same as web)
│   └── expo/          ← React Native app (Expo)
├── packages/
│   └── shared/        ← Shared types + schemas
├── docker-compose.yml
└── turbo.json

The apps/api/ directory is identical to a web project — same Go code, same routes, same services. The only difference is apps/expo/ replacingapps/web/.

Start the API

The API is a standard Grit Go backend. Start the infrastructure services first, then run the API server:

# Start PostgreSQL, Redis, MinIO
docker compose up -d

# Run the Go API
grit start server

The API will start on http://localhost:8080. You can verify it's running by opening that URL in your browser — you should see a JSON health check response.

Start Expo

With the API running, open a new terminal and start the Expo dev server:

grit start expo

Expo will display a QR code in the terminal. You have three options:

• Physical phone: Scan the QR code with Expo Go (Android) or your camera app (iOS)
• iOS Simulator: Press i in the terminal (macOS only, requires Xcode)
• Android Emulator: Press a in the terminal (requires Android Studio)

Project Structure

The Expo app follows the same conventions as a Next.js project. Here's what's insideapps/expo/:

apps/expo/
├── app/                 ← Screens (Expo Router)
│   ├── _layout.tsx      ← Root layout (wraps all screens)
│   ├── index.tsx        ← Home screen
│   ├── login.tsx        ← Login screen
│   ├── register.tsx     ← Register screen
│   └── (tabs)/          ← Tab navigation group
│       ├── _layout.tsx  ← Tab bar configuration
│       ├── index.tsx    ← Home tab
│       └── profile.tsx  ← Profile tab
├── components/          ← Reusable UI components
├── hooks/               ← Custom hooks (useAuth, etc.)
├── lib/                 ← API client, utilities
└── package.json

Key Expo Router conventions:

• • _layout.tsx — Wraps child screens. Defines navigation structure (stack, tabs).
• • index.tsx — The default screen for a directory (like / in a URL).
• • (tabs)/ — A route group. The parentheses mean it doesn't appear in the URL.
• • Any .tsx file in app/ becomes a screen automatically.

Shared Types

The packages/shared/ directory is used by both the Go API and the Expo app. It contains Zod schemas and TypeScript types that keep the frontend and backend in sync.

packages/shared/
├── types/
│   ├── user.ts       ← User type + schemas
│   ├── auth.ts       ← Login/register schemas
│   └── api.ts        ← API response types
├── schemas/
│   └── index.ts      ← Zod validation schemas
└── constants/
    └── routes.ts     ← API route constants

When you use grit generate resource to add a new API resource, the TypeScript types are automatically generated in packages/shared/. Your mobile app gets them for free — no manual syncing required.

The API Client

The mobile app calls the Go API using a configured HTTP client. Here's how a typical API call looks:

// lib/api.ts
const API_URL = "http://localhost:8080"

export async function login(email: string, password: string) {
  const response = await fetch(API_URL + "/api/auth/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  })
  return response.json()
}

Summary

Here's what you learned in this course:

• Grit scaffolds a monorepo with a Go API and an Expo React Native app
• The Go API is identical to web projects — same code, same routes
• Expo Router provides file-based navigation (like Next.js for mobile)
• Shared types keep the API and mobile app in sync
• The API client connects the mobile app to the Go backend over HTTP