Guide

ℹ️ This page is part of the template — remove it when starting a new project

📁 Project Structure

expo-starter-template/

├── app/

— Expo Router pages

│ ├── (tabs)/

— Tab navigation screens

│ ├── _layout.tsx

— Root layout with providers

│ ├── login.tsx

— Login screen

│ └── +not-found.tsx

— 404 page

├── components/

— React components

│ └── ui/

— Reusable UI components

├── config/

— App configuration

│ └── env.ts

— Environment variables

├── constants/

— App constants

│ └── Colors.ts

— Theme colors

├── contexts/

— React contexts

│ └── AuthContext.tsx

— Auth state management

├── lib/

— Utilities & helpers

│ └── api.ts

— API client wrapper

├── assets/

— Images, fonts, etc.

├── app.json

— Expo configuration

└── package.json

— Dependencies

✨ Included Features

📱

Tab navigation (Expo Router)

🎨

Dark/Light theming

🔌

API client (fetch wrapper)

🔐

Auth context (login/logout)

🧩

Reusable components (Button, Card, TextInput, Loading)

⚙️

Environment configuration

🌐

Web support enabled

📘

TypeScript configured

🚀 Quick Start

1

Clone or copy this template

git clone <repo-url> my-app

2

Update name/slug in app.json

{ "name": "my-app", "slug": "my-app" }

3

Install dependencies

cd my-app && npm install

4

Start development server

npx expo start

🎨 Components Preview

Button Variants

Primary

Secondary

Outline

Ghost

Button Sizes

Small

Medium

Large

Button Loading State

Loading...

Disabled

Card Component

This is a Card component with default styling

TextInput Component

Text Input

With Error

This field has an error

Loading Component

Loading...





Home





Guide





Settings