Expo Base

Expo boilerplate for rapid application development, featuring authentication and more.

• Boilerplate Features
• Folder Structure
  • App
  • Assets
  • Components
  • Constants
  • Context
  • E2E
  • Hooks
  • Screens
  • Services
  • Store
  • Translations
• Run Expo Dev Build

Boilerplate Features

• File-Based Routing
• Vanilla StyleSheet Kit
• Network Handling
• Local Storage Management
• Dark Theme Support
• Internationalization and Localization
• TypeScript Integration
• Font Management
• Splash Screen Configuration
• Authentication Setup
• End-to-End Testing Support

Folder Structure

e2e
src
 ├── @types
 ├── app
 ├── assets
     ├── fonts
     ├── images
     ├── svg
 ├── components
     └── UI
 ├── constants
 ├── context
 ├── hooks
     └── eas
 ├── screens
 ├── services
     ├── api
 ├── store
     └── slices
 └── translations
     └── locales

App

Expo router app directory. Contains the application's routes. When a new file is added to this directory, it becomes a navigable route.

Assets

Project assets such as fonts, images, and SVG files.

Components

Base components used throughout the project, e.g., Text, SafeTop.

Constants

Reusable stylesheets and constants for the UI kit, e.g., colors, shadows, typography.

Context

Context providers from third-party packages and custom providers, including authorization for routing. Examples include React Context, Redux Context Provider, and Safe Area Provider.

E2E

End-to-end tests for the project, structured similarly to screens for better management.

Hooks

Base hooks used throughout the project, e.g., useKeyboardVisible.

Screens

Pages of the application, organized in this folder and imported into specific routes in the app directory.

Services

Services used in screens, such as API handling. The api folder contains routes created with Axios instances.

Store

RTK based store, uses MMKV storage and redux-persist for state persistence. The slices folder includes reducers used throughout the app.

Translations

The translations folder contains functions and locales for internationalization and localization.

Run in Expo Dev Build

• Set up the development build: Expo Dev Build Documentation.
• Install dependencies: npm install or yarn install.
• Run on both Android & iOS: npm start (or yarn start).
• Run on Android: npm run android (or yarn android).
• Run on iOS: npm run ios (or yarn ios).
• ✨ Don't forget to enable ESLint ✨