Directory Structure of the Expo App

This guide explores the directory structure of an Expo app under CloudNua Mobile, detailing the purpose and contents of key files and directories.

Overview

The Expo app leverages Expo Router V3, a file-based routing system, where the file structure dictates your app's navigation.

|-- .storybook
|-- app/
|   |-- (auth) // checks authenticated user
|   |-- (protected) // all the protected routes
|   |-- (public) // all the public routes
|   |-- ...
|-- components
|   |-- ...
|-- context
|-- expo-config
|-- helpers
|-- lib
|   |-- supabase.ts
|-- stories
|-- types

Root Directory

Contains essential configuration files like app.json, package.json, and metro.config.js for bundling configuration.

.storybook File

Contains configuration files for Storybook.

app Directory

Houses all route pages and main application views for proper routing and navigation.

• app/auth: Route pages for authentication features (sign-up, sign-in, etc.)
• app/protected: Guarded routes using <AuthGuard /> component to prevent unauthorized access
• app/public: Publicly accessible routes requiring no active user session

assets Directory

Holds static assets like images, fonts, and multimedia resources specific to the Expo app. Shared assets should use the packages directory instead.

components Directory

Stores reusable UI components specific to your Expo app. Shared components should use the packages directory.

context Directory

Houses context providers for managing global state and shared data across the application.

lib Directory

Contains third-party library integrations and external dependencies.

types Directory

Defines TypeScript types and interface objects ensuring type safety and consistent data structures.

stories Directory

Contains Storybook stories for developing and testing UI components in isolation.

• stories/component-x: Directory for a specific component's stories
• stories/component-x/index.tsx: Entry file showcasing different states and variations