How md-merazul-islam/react-native-teamplate works
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: transactions Tx feature · components UI kit · AppNavigator.tsx App nav · auth Auth feature
Components 24
App shell
Top-level React Native composition, navigation, and global app state.
- App entry · Root application component that wires providers and navigation.
src/App.tsx - Providers · Assembles global app concerns such as state and theming.
src/app/providers/AppProviders.tsx - App nav · Top-level route switch that decides the authenticated or unauthenticated flow.
src/app/navigation/AppNavigator.tsx - Auth nav · Authentication flow routes and screens.
src/app/navigation/AuthNavigator.tsx - Tabs · Primary in-app tabbed navigation for authenticated users.
src/app/navigation/TabNavigator.tsx - Route types · Typed route and navigation definitions shared by navigators.
src/app/navigation/types.ts - App store · Global application state container.
src/app/store/useAppStore.ts
Features
Feature-based screens, hooks, services, and local state.
- Auth feature · Authentication UI and login orchestration.
src/features/auth - Home feature · Main landing experience and summary presentation.
src/features/home - Tx feature · Transaction list, item rendering, and transaction state.
src/features/transactions - Auth service · Authentication business operations and data access.
src/features/auth/services/authService.ts - Home service · Home summary data retrieval and business logic.
src/features/home/services/homeService.ts - Tx service · Transaction-related business operations and API access.
src/features/transactions/services/transactionService.ts - Tx store · Feature-local transaction state container.
src/features/transactions/store/useTransactionStore.ts
Infrastructure
Cross-cutting API, storage, config, and Firebase services.
- API client · Shared HTTP client used by feature services.
src/services/api/axiosClient.ts - Error handler · Centralized API error normalization and handling.
src/services/api/errorHandler.ts - Storage · Async and secure storage wrappers plus token persistence.
src/services/storage - Firebase · Firebase integration boundary.
src/services/firebase/index.ts
Shared
Reusable UI primitives, theme, constants, utilities, and types.
- UI kit · Reusable primitives such as buttons, inputs, cards, and typography.
src/shared/components - Theme · Color scheme helpers and token-driven styling foundation.
src/shared/theme/tokens.ts - Routes · Central route name constants used across navigation.
src/shared/constants/routes.ts - Utils · Formatting, validation, and lightweight utility helpers.
src/shared/utils - Types · Common API, auth, and transaction type definitions.
src/shared/types
Native Android
Android host project and build/runtime shell.
- Android shell · Native Android Gradle project and packaging container.
android
Connections 30
- 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.