Skip to main content

Architecture

App architecture and project structure documentation for ZÈYA Mobile App.

Tech Stack​

Core Framework​

  • React Native: 0.79.6
  • Expo SDK: 53.0.24
  • React: 19.0.0
  • JavaScript Engine: Hermes
  • Expo Router: 5.1.8 (File-based routing)
  • React Navigation: (via Expo Router)

State Management​

  • React Context API: For global state
  • Local State: React hooks (useState, useReducer)

HTTP & API​

  • Axios: 1.13.2 (HTTP client)
  • Custom API Provider: Context-based API management

Firebase​

  • Firebase SDK: 12.6.0
  • React Native Firebase: 23.7.0
    • Analytics
    • Realtime Database
    • Cloud Messaging

Maps & Location​

  • React Native Maps: 1.20.1
  • Expo Location: 18.1.6

UI & Styling​

  • React Native Reanimated: 3.17.4 (Animations)
  • React Native Gesture Handler: 2.24.0
  • Expo Linear Gradient: 14.1.5
  • React Native SVG: 15.11.2
  • Lottie React Native: 7.2.2 (Animations)

Media & Camera​

  • Expo Image Picker: 16.1.4
  • Expo Camera: 16.1.11
  • Expo Image: 2.4.1
  • Expo Video: 2.2.2

Authentication​

  • Expo Apple Authentication: 7.2.4
  • React Native Google Sign-In: 11.0.1
  • React Native FBSDK Next: 13.4.1

Notifications​

  • Expo Notifications: 0.31.4

Internationalization​

  • i18next: 25.2.0
  • react-i18next: 15.5.1

Storage​

  • AsyncStorage: 2.1.2
  • Expo Secure Store: 14.2.4

Project Structure​

Zeya-Mobile-App/
├── src/
│   ├── app/                      # Expo Router pages (file-based routing)
│   │   ├── (auth)/              # Authenticated routes
│   │   │   ├── (tabs)/          # Tab navigation
│   │   │   ├── chat/            # Chat screens
│   │   │   ├── groups/          # Groups screens
│   │   │   ├── onboarding/      # Onboarding flow
│   │   │   └── profile/          # Profile screens
│   │   ├── index.jsx            # Entry point
│   │   ├── login.jsx            # Login screen
│   │   └── register-*.jsx       # Registration screens
│   │
│   ├── assets/                   # Static assets
│   │   ├── font/                 # Custom fonts
│   │   ├── icon/                 # Icons
│   │   ├── img/                  # Images
│   │   └── sound/                # Sound files
│   │
│   ├── components/              # Reusable components
│   │   ├── CustomSwiper/        # Swiper components
│   │   └── navigation/          # Navigation components
│   │
│   ├── constants/                # Constants
│   │   └── Colors.ts            # Color definitions
│   │
│   ├── context/                  # React Context providers
│   │   ├── ApiProvider.js       # API context
│   │   ├── authContext.js       # Auth context
│   │   ├── settingContext.js    # Settings context
│   │   └── StyleProvider.js     # Style context
│   │
│   ├── locales/                 # Translation files
│   │   ├── en.json              # English
│   │   ├── fr.json              # French
│   │   └── ...                  # Other languages
│   │
│   ├── screen/                  # Screen components
│   │   ├── chat/                # Chat screens
│   │   ├── groups/              # Group screens
│   │   ├── home/                # Home screens
│   │   ├── profile/             # Profile screens
│   │   └── swap/                # Swap screens
│   │
│   └── share/                    # Shared utilities
│       ├── api.js               # API functions
│       ├── firebase.js          # Firebase config
│       ├── storage.js           # Storage utilities
│       ├── constant.js          # Constants
│       └── ...                  # Other utilities
│
├── android/                      # Android native code
├── ios/                          # iOS native code
├── app.json                      # Expo configuration
├── eas.json                      # EAS build configuration
├── babel.config.js              # Babel configuration
├── metro.config.js              # Metro bundler config
└── package.json                 # Dependencies

Architecture Patterns​

File-Based Routing​

Expo Router uses file-based routing:

  • src/app/index.jsx → /
  • src/app/login.jsx → /login
  • src/app/(auth)/profile/index.jsx → /profile

Context-Based State Management​

Global state managed through React Context:

  • ApiProvider: API calls and authentication
  • AuthContext: User authentication state
  • SettingContext: App settings
  • StyleProvider: Theme and styling

API Integration Pattern​

// API calls through context
const { apiCall } = useContext(ApiContext);
const data = await apiCall('endpoint', { method: 'GET' });

Component Structure​

Component/
├── Component.jsx          # Main component
├── Component.styles.js    # Styles (if separate)
└── Component.test.js      # Tests (if any)

Stack Navigation​

  • Main app navigation uses Expo Router's stack navigation
  • Tab navigation for main app sections

Route Groups​

  • (auth) - Authenticated routes
  • (tabs) - Tab navigation routes

Deep Linking​

  • Configured in app.json
  • Scheme: zeya://
  • Universal links: applinks:zeyaapp.com

State Management​

Global State (Context)​

  • Authentication state
  • User profile
  • App settings
  • API configuration

Local State (Hooks)​

  • Component-specific state
  • Form state
  • UI state (modals, toggles)

Storage​

  • AsyncStorage: Non-sensitive data
  • Expo Secure Store: Tokens, credentials

API Architecture​

API Provider Pattern​

// Centralized API management
- Base URL configuration
- Token management
- Request/response interceptors
- Error handling
- Unauthorized endpoint handling

Endpoint Configuration​

Environment-based endpoints:

  • Production: https://zeyaapp.com/api/v1/
  • Staging: https://staging.zeyaapp.com/api/v1/

Firebase Integration​

Services Used​

  • Realtime Database: Chat messages
  • Analytics: User behavior tracking
  • Cloud Messaging: Push notifications

Configuration​

  • Android: google-services.json
  • iOS: GoogleService-Info.plist

Internationalization​

i18next Setup​

  • Translation files in src/locales/
  • Supported languages: en, fr, es, it, pt, de
  • Dynamic language switching

Usage Pattern​

import { useTranslation } from 'react-i18next';
const { t } = useTranslation();
<Text>{t('welcome.message')}</Text>

Security​

Authentication​

  • JWT token storage in Secure Store
  • Token refresh mechanism
  • Secure API communication

Data Protection​

  • Secure storage for sensitive data
  • HTTPS for all API calls
  • Certificate pinning (if configured)

Performance Optimization​

Code Splitting​

  • Lazy loading with Expo Router
  • Dynamic imports for heavy components

Image Optimization​

  • Expo Image for optimized images
  • Image compression
  • Lazy loading

Animation Performance​

  • React Native Reanimated for 60fps animations
  • Native driver usage

Build Architecture​

EAS Build​

  • Cloud-based builds
  • Environment-specific configurations
  • Automated versioning

Build Profiles​

  • development - Dev client builds
  • preview - Internal testing
  • staging - Staging environment
  • production - Production builds