# md-merazul-islam/react-native-teamplate architecture

> Architecture diagram of the GitHub repository md-merazul-islam/react-native-teamplate, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/md-merazul-islam/react-native-teamplate
- Repository: https://github.com/md-merazul-islam/react-native-teamplate

## Overview

1. **What this repo is**
   - A React Native starter/template app in TypeScript, organized for feature-based growth.
   - The application code lives under `src/`, while `android/` contains the native Android shell for running/building the app.

2. **App bootstrap and composition**
   - `src/App.tsx` is the top-level entry that likely wires together app providers and the navigator tree.
   - `src/app/providers/AppProviders.tsx` is the composition boundary for cross-cutting concerns such as state, theme, and other global setup.

3. **Navigation is the main UI boundary**
   - Navigation is split into `AppNavigator`, `AuthNavigator`, and `TabNavigator`.
   - This implies a common flow of “unauthenticated auth stack” vs “authenticated app tabs,” with route names centralized in `src/shared/constants/routes.ts` and typed in `src/app/navigation/types.ts`.

4. **Feature-based domain structure**
   - Each feature owns its own screens, hooks, components, services, and sometimes store:
     - `features/auth`
     - `features/home`
     - `features/transactions`
   - This keeps feature-specific UI and business logic isolated from the rest of the app.

5. **Typical feature data flow**
   - Screens render feature components and call feature hooks.
   - Hooks encapsulate orchestration and often connect UI to feature services and stores.
   - Services contain the feature’s data-access or business operations, such as `authService`, `homeService`, and `transactionService`.

6. **State management**
   - Zustand is used for state.
   - There is at least one app-level store in `src/app/store/useAppStore.ts` and a feature store in `features/transactions/store/useTransactionStore.ts`.
   - This suggests a split between global app state and feature-local state rather than a single monolithic store.

7. **API/infrastructure layer**
   - Shared network infrastructure is in `src/services/api/` with an Axios client, endpoint definitions, and centralized error handling.
   - The intended flow is: feature service → Axios client → backend/API → normalized error handling back to the feature/UI layer.

8. **Storage and session persistence**
   - `src/services/storage/` provides wrappers for `AsyncStorage`, secure storage, and token persistence.
   - This indicates a clean separation between transient app state and persisted/auth-sensitive data, with token handling abstracted away from feature code.

9. **Shared UI and utilities**
   - Reusable primitives live in `src/shared/components/` such as `Button`, `Input`, `Card`, `BottomSheetModal`, and `Typography`.
   - Shared utilities, validators, formatters, and type definitions are centralized under `src/shared/utils`, `src/shared/types`, and `src/utils`.
   - These are the design-system and helper layers consumed by all features.

10. **Styling and theming**
   - The project uses NativeWind/Tailwind-style utility classes, with global CSS and Tailwind config at the repo root.
   - Theme tokens and color-scheme helpers live in `src/shared/theme/` and `src/shared/hooks/useAppColorScheme.ts`, showing dark-mode readiness and a token-driven styling approach.

11. **Config and environment**
   - `src/config/env.ts` is the config boundary for environment values.
   - This is where runtime-specific settings should be isolated from feature code, keeping platform/environment concerns centralized.

12. **Native Android layer**
   - The `android/` directory is a full Android Gradle project with a Capacitor-style structure, including `MainActivity`, manifest, resources, and Gradle config.
   - This layer is the native container around the JS app and is responsible for Android packaging, permissions, launch assets, and release builds.

13. **Tooling and quality gates**
   - The repo uses Metro, Babel, ESLint, Jest, TypeScript, and Tailwind/NativeWind config.
   - Scripts include reset/reinstall helpers, version bumping, test/lint/typecheck, and Android sync/release tasks, indicating the template is set up for repeatable app delivery as well as iteration.

Main entry points: [`src/features/transactions`](https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/features/transactions) (Tx feature), [`src/shared/components`](https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/shared/components) (UI kit), [`src/app/navigation/AppNavigator.tsx`](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/navigation/AppNavigator.tsx) (App nav), [`src/features/auth`](https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/features/auth) (Auth feature)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_src_app["App entry<br/>react-native entry<br/>[App.tsx]"]
  node_app_providers["Providers<br/>composition boundary<br/>[AppProviders.tsx]"]
  node_app_navigator["App nav<br/>navigator<br/>[AppNavigator.tsx]"]
  node_auth_navigator["Auth nav<br/>navigator<br/>[AuthNavigator.tsx]"]
  node_tab_navigator["Tabs<br/>navigator<br/>[TabNavigator.tsx]"]
  node_route_types["Route types<br/>nav types<br/>[types.ts]"]
  node_app_store[("App store<br/>zustand store<br/>[useAppStore.ts]")]
end

subgraph group_features["Features"]
  node_auth_feature["Auth feature<br/>feature area"]
  node_home_feature["Home feature<br/>feature area"]
  node_tx_feature["Tx feature<br/>feature area"]
  node_auth_service["Auth service<br/>feature service<br/>[authService.ts]"]
  node_home_service["Home service<br/>feature service<br/>[homeService.ts]"]
  node_tx_service["Tx service<br/>feature service"]
  node_tx_store[("Tx store<br/>zustand store")]
end

subgraph group_infra["Infrastructure"]
  node_api_client["API client<br/>axios client<br/>[axiosClient.ts]"]
  node_api_error["Error handler<br/>api infra<br/>[errorHandler.ts]"]
  node_storage_layer[("Storage")]
  node_firebase_layer["Firebase<br/>native service<br/>[index.ts]"]
end

subgraph group_shared["Shared"]
  node_shared_ui["UI kit<br/>shared components"]
  node_theme_layer["Theme<br/>design tokens<br/>[tokens.ts]"]
  node_shared_constants["Routes<br/>shared constants<br/>[routes.ts]"]
  node_shared_utils["Utils<br/>shared helpers"]
  node_shared_types["Types"]
end

subgraph group_native["Native Android"]
  node_android_shell["Android shell<br/>android host"]
end

node_src_app -->|"wraps"| node_app_providers
node_src_app -->|"mounts"| node_app_navigator
node_app_providers -->|"provides"| node_app_store
node_app_providers -->|"configures"| node_theme_layer
node_app_navigator -->|"routes to"| node_auth_navigator
node_app_navigator -->|"routes to"| node_tab_navigator
node_app_navigator -->|"uses"| node_route_types
node_auth_navigator -->|"renders"| node_auth_feature
node_tab_navigator -->|"renders"| node_home_feature
node_tab_navigator -->|"renders"| node_tx_feature
node_auth_feature -->|"calls"| node_auth_service
node_auth_feature -->|"uses"| node_shared_ui
node_home_feature -->|"calls"| node_home_service
node_home_feature -->|"uses"| node_shared_ui
node_tx_feature -->|"calls"| node_tx_service
node_tx_feature -->|"reads/writes"| node_tx_store
node_tx_feature -->|"uses"| node_shared_ui
node_auth_service -->|"requests"| node_api_client
node_home_service -->|"requests"| node_api_client
node_tx_service -->|"requests"| node_api_client
node_api_client -->|"normalizes"| node_api_error
node_auth_service -->|"persists"| node_storage_layer
node_app_store -.->|"persists"| node_storage_layer
node_firebase_layer -.->|"integrates"| node_app_store
node_shared_ui -->|"styles with"| node_theme_layer
node_shared_ui -->|"uses"| node_shared_utils
node_auth_feature -->|"depends on"| node_shared_types
node_home_feature -->|"depends on"| node_shared_types
node_tx_feature -->|"depends on"| node_shared_types
node_src_app -.->|"hosts on"| node_android_shell

click node_src_app "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/App.tsx"
click node_app_providers "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/providers/AppProviders.tsx"
click node_app_navigator "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/navigation/AppNavigator.tsx"
click node_auth_navigator "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/navigation/AuthNavigator.tsx"
click node_tab_navigator "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/navigation/TabNavigator.tsx"
click node_route_types "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/navigation/types.ts"
click node_app_store "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/store/useAppStore.ts"
click node_auth_feature "https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/features/auth"
click node_home_feature "https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/features/home"
click node_tx_feature "https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/features/transactions"
click node_auth_service "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/features/auth/services/authService.ts"
click node_home_service "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/features/home/services/homeService.ts"
click node_tx_service "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/features/transactions/services/transactionService.ts"
click node_tx_store "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/features/transactions/store/useTransactionStore.ts"
click node_api_client "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/services/api/axiosClient.ts"
click node_api_error "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/services/api/errorHandler.ts"
click node_storage_layer "https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/services/storage"
click node_firebase_layer "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/services/firebase/index.ts"
click node_shared_ui "https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/shared/components"
click node_theme_layer "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/shared/theme/tokens.ts"
click node_shared_constants "https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/shared/constants/routes.ts"
click node_shared_utils "https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/shared/utils"
click node_shared_types "https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/shared/types"
click node_android_shell "https://github.com/md-merazul-islam/react-native-teamplate/tree/main/android"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_src_app,node_app_providers,node_app_navigator,node_auth_navigator,node_tab_navigator,node_route_types,node_app_store toneBlue
class node_auth_feature,node_home_feature,node_tx_feature,node_auth_service,node_home_service,node_tx_service,node_tx_store toneAmber
class node_api_client,node_api_error,node_storage_layer,node_firebase_layer toneMint
class node_shared_ui,node_theme_layer,node_shared_constants,node_shared_utils,node_shared_types toneRose
class node_android_shell toneIndigo
```

## Components

### App shell

Top-level React Native composition, navigation, and global app state.

- [App entry](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/App.tsx): react-native entry · Root application component that wires providers and navigation. · `src/App.tsx`
- [Providers](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/providers/AppProviders.tsx): composition boundary · Assembles global app concerns such as state and theming. · `src/app/providers/AppProviders.tsx`
- [App nav](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/navigation/AppNavigator.tsx): navigator · Top-level route switch that decides the authenticated or unauthenticated flow. · `src/app/navigation/AppNavigator.tsx`
- [Auth nav](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/navigation/AuthNavigator.tsx): navigator · Authentication flow routes and screens. · `src/app/navigation/AuthNavigator.tsx`
- [Tabs](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/navigation/TabNavigator.tsx): navigator · Primary in-app tabbed navigation for authenticated users. · `src/app/navigation/TabNavigator.tsx`
- [Route types](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/navigation/types.ts): nav types · Typed route and navigation definitions shared by navigators. · `src/app/navigation/types.ts`
- [App store](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/app/store/useAppStore.ts): zustand store · Global application state container. · `src/app/store/useAppStore.ts`

### Features

Feature-based screens, hooks, services, and local state.

- [Auth feature](https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/features/auth): feature area · Authentication UI and login orchestration. · `src/features/auth`
- [Home feature](https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/features/home): feature area · Main landing experience and summary presentation. · `src/features/home`
- [Tx feature](https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/features/transactions): feature area · Transaction list, item rendering, and transaction state. · `src/features/transactions`
- [Auth service](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/features/auth/services/authService.ts): feature service · Authentication business operations and data access. · `src/features/auth/services/authService.ts`
- [Home service](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/features/home/services/homeService.ts): feature service · Home summary data retrieval and business logic. · `src/features/home/services/homeService.ts`
- [Tx service](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/features/transactions/services/transactionService.ts): feature service · Transaction-related business operations and API access. · `src/features/transactions/services/transactionService.ts`
- [Tx store](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/features/transactions/store/useTransactionStore.ts): zustand store · Feature-local transaction state container. · `src/features/transactions/store/useTransactionStore.ts`

### Infrastructure

Cross-cutting API, storage, config, and Firebase services.

- [API client](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/services/api/axiosClient.ts): axios client · Shared HTTP client used by feature services. · `src/services/api/axiosClient.ts`
- [Error handler](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/services/api/errorHandler.ts): api infra · Centralized API error normalization and handling. · `src/services/api/errorHandler.ts`
- [Storage](https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/services/storage): storage layer · Async and secure storage wrappers plus token persistence. · `src/services/storage`
- [Firebase](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/services/firebase/index.ts): native service · Firebase integration boundary. · `src/services/firebase/index.ts`

### Shared

Reusable UI primitives, theme, constants, utilities, and types.

- [UI kit](https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/shared/components): shared components · Reusable primitives such as buttons, inputs, cards, and typography. · `src/shared/components`
- [Theme](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/shared/theme/tokens.ts): design tokens · Color scheme helpers and token-driven styling foundation. · `src/shared/theme/tokens.ts`
- [Routes](https://github.com/md-merazul-islam/react-native-teamplate/blob/main/src/shared/constants/routes.ts): shared constants · Central route name constants used across navigation. · `src/shared/constants/routes.ts`
- [Utils](https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/shared/utils): shared helpers · Formatting, validation, and lightweight utility helpers. · `src/shared/utils`
- [Types](https://github.com/md-merazul-islam/react-native-teamplate/tree/main/src/shared/types): shared types · Common API, auth, and transaction type definitions. · `src/shared/types`

### Native Android

Android host project and build/runtime shell.

- [Android shell](https://github.com/md-merazul-islam/react-native-teamplate/tree/main/android): android host · Native Android Gradle project and packaging container. · `android`

## Connections

- App entry → Providers: wraps · Root app composition is wrapped in global providers.
- App entry → App nav: mounts · The app entry mounts the main navigation tree.
- Providers → App store: provides · Providers expose global state to the app.
- Providers → Theme: configures · Providers likely set up theme and color scheme context.
- App nav → Auth nav: routes to · Unauthenticated flow goes to the auth stack.
- App nav → Tabs: routes to · Authenticated flow goes to the tab-based app shell.
- App nav → Route types: uses · Navigation logic relies on shared typed route definitions.
- Auth nav → Auth feature: renders · Auth navigator hosts auth screens and components.
- Tabs → Home feature: renders · One tab surfaces the home experience.
- Tabs → Tx feature: renders · One tab surfaces transactions.
- Auth feature → Auth service: calls · Login UI and hooks delegate to auth business logic.
- Auth feature → UI kit: uses · Feature screens compose reusable shared UI primitives.
- Home feature → Home service: calls · Home summary hook delegates to feature service logic.
- Home feature → UI kit: uses · Home screens are built from shared UI components.
- Tx feature → Tx service: calls · Transaction screens and hooks use transaction business logic.
- Tx feature → Tx store: reads/writes · Transaction state is maintained in a feature-local store.
- Tx feature → UI kit: uses · Transaction views reuse shared UI primitives.
- Auth service → API client: requests · Auth operations travel through the shared HTTP client.
- Home service → API client: requests · Home data access uses the shared HTTP client.
- Tx service → API client: requests · Transaction operations use the shared HTTP client.
- API client → Error handler: normalizes · HTTP failures are processed through centralized error handling.
- Auth service → Storage: persists · Auth flow stores tokens and session data via storage abstractions.
- App store → Storage: persists · Global state can be reconciled with persistent storage.
- Firebase → App store: integrates · Firebase is available as a cross-cutting infrastructure service.
- UI kit → Theme: styles with · Shared components consume theme tokens and color scheme helpers.
- UI kit → Utils: uses · UI primitives reuse common helper utilities.
- Auth feature → Types: depends on · Auth flows use shared auth and API types.
- Home feature → Types: depends on · Home summary models use shared types.
- Tx feature → Types: depends on · Transaction models use shared types.
- App entry → Android shell: hosts on · The React Native app is packaged inside the Android container.