Skip to content

Directory Structure of the Expo app

This guide explores the directory structure of an Expo app under AppLaunchKit, detailing the purpose and contents of the key files and directories. Understanding this structure will help you navigate the codebase and enhance your development workflow.

Overview

The Expo app provided with the AppLaunchKit leverages Expo Router V3, a file-based routing system, where the file structure dictates your app’s navigation. The overview of the directory structure is shown below.

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

This directory contains essential configuration files like app.json, package.json, and metro.config.js (for configuration related to bundling).

.storybook file

Config files for storybook

app directory

Contains all route pages and main application views. This is where the different pages of your application are defined and structured, ensuring proper routing and navigation within the app.

  • app/auth: Contains the route pages pertaining to the auth features like sign-up, sign-in etc.

  • app/protected: Contains the route pages that are guarded beyond authentication. It leverages <AuthGuard /> component that protects these routes against unauthorized access.

  • app/public: Contains the route pages that are publically accessible and does not need an active user session.

assets directory

Holds static assets like images, fonts, and other multimedia resources specific to the Expo app. This directory ensures that all static files are easily accessible and organized for use throughout the application. Store all those static files that will be used just in the Expo app. For all other files that are shared across both Expo as well as Next.js app, use the packages directory in the root of the monorepo. View the detailed structure of packages directory.

components directory

Stores reusable UI components for specific to your Expo app. For all other components that are shared across both Expo as well as Next.js app, use the packages directory in the root of the monorepo. View the detailed structure of packages directory.

context directory

Houses context providers for managing global state and shared data. This allows for efficient state management and data sharing across different parts of your application.

lib directory

Contains integrations with third-party libraries. This directory manages external dependencies and ensures that interactions with third-party services and libraries are well-organized and maintainable.

types directory

Defines TypeScript types and interface objects for your app. This ensures type safety and helps with maintaining consistent data structures throughout your application.

stories directory

Contains stories for developing and testing UI components in isolation.

  • stories/component-x: A specific component directory inside stories, containing the Storybook stories for component-x.

  • stories/component-x/index.tsx: The entry file for the component-x stories, showcasing different states and variations of the component.