Skip to main content
DOSS is a React Native mobile payment application targeting Android and iOS. The codebase follows a layered architecture where screens compose components, which consume services and stores, with shared utilities and themes across all layers.

​
Project structure

DOSS/
├── android/                  # Android native project
├── ios/                      # iOS native project
├── src/
│   ├── assets/               # Static assets (SVGs, images, fonts)
│   ├── components/           # UI components
│   │   ├── core/             # Primitive building blocks
│   │   ├── common/           # Shared composite components
│   │   ├── modal/            # Modal components
│   │   └── ScreenComp/       # Screen-specific components
│   ├── navigation/           # React Navigation stacks
│   │   ├── Root/             # Root navigator and stack definitions
│   │   └── Tab/              # Bottom tab navigator
│   ├── screens/              # Feature screens
│   │   ├── Authentication/   # Login, sign-up, PIN flows
│   │   ├── Home/             # Home dashboard
│   │   ├── TransactionsHistory/
│   │   ├── Merchant/
│   │   ├── Profile/
│   │   ├── Scan&Pay/
│   │   ├── Notifications/
│   │   ├── MyIdentity/
│   │   ├── ScannedProfile/
│   │   ├── Alert/
│   │   ├── Onboarding/
│   │   └── Splash/
│   ├── services/
│   │   ├── api-config/       # Axios instance and interceptors
│   │   ├── api-hooks/        # TanStack Query wrappers
│   │   └── hooks/            # Other custom React hooks
│   ├── store/
│   │   ├── StateManager/     # Zustand stores
│   │   └── LocalStorage/     # AsyncStorage helpers
│   ├── themes/               # Colors, typography, screen options
│   ├── types/                # TypeScript type definitions
│   └── utils/
│       ├── helpers/          # Pure utility functions
│       ├── enums/            # Route names, endpoint constants
│       ├── constants/        # App-wide constants
│       └── DimensionsUtils/  # Responsive scaling helpers
├── babel.config.js
├── tsconfig.json
└── package.json

​
Layer architecture

Screens

Feature-level views. Each screen is a self-contained folder under src/screens/. Screens consume components, call API hooks, and read from Zustand stores.

Components

Three tiers: core primitives (Box, Text, Button, Input), common composites (BottomSheetModal, ScreenWrapper), and ScreenComp for screen-specific parts.

Services

The api-config/ folder holds the Axios instance. The api-hooks/ folder exposes TanStack Query wrappers (useGetMethod, usePostMethod, etc.) that all data-fetching flows use.

Store

Zustand manages client state (useAuthStore, useWallet). AsyncStorage (via storage.js) persists the auth token and FCM token between sessions.

Utils

Pure helper functions (formatTransactionDate, truncateText, capitalizeText, etc.), route name enums, and dimension scaling utilities.

Themes

Centralised color palette (colors.js, pallete) and screen transition options consumed by the navigators.

​
Module resolution alias

All imports inside src/ use the ~ alias instead of relative paths. This is configured in both the Babel transform and TypeScript compiler. 
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        alias: {
          '~': './src',
        },
      },
    ],
  ],
};
Instead of ../../services/api-hooks/useGetMethod, any file can write: 
import { useGetMethod } from '~/services/api-hooks/useGetMethod';

​
Key dependencies

PackageVersionRole
react-native0.73.6Core framework
@react-navigation/native^6.1.16Navigation container
@react-navigation/native-stack^6.9.25Native stack navigator
@react-navigation/bottom-tabs^6.5.20Bottom tab navigator
@tanstack/react-query^5.28.4Server state and caching
axios^1.6.8HTTP client
zustand^4.5.2Client state management
react-hook-form^7.51.1Form state
zod^3.22.4Schema validation
@react-native-async-storage/async-storage^1.22.3Persistent key-value store
@react-native-firebase/messaging^19.1.2FCM push notifications
@notifee/react-native^7.8.2Local notification display
@react-native-community/netinfo^11.3.1Network connectivity detection
react-native-toast-message^2.2.0In-app toast notifications
react-native-image-picker^7.1.2Camera and gallery access
react-native-document-picker^9.1.1File picker
react-native-blob-util^0.19.9Binary file operations
react-native-pdf^6.7.5PDF rendering
react-native-qrcode-svg^6.3.0QR code generation
react-native-camera-kit^13.0.0Camera scanning
react-native-geolocation-service^5.3.1Location services
react-native-svg^15.1.0SVG rendering
moment^2.30.1Date formatting
babel-plugin-module-resolver^5.0.0~ alias resolution

​
Component hierarchy

​
Core components

These are thin, typed wrappers over React Native primitives. They accept style props directly and form the base of every screen layout.
ComponentFileRole
Boxcore/Box.tsxGeneric View wrapper
Textcore/Text.tsxTyped text with preset styles
HStackcore/HStack.tsxHorizontal flex container
VStackcore/VStack.tsxVertical flex container
Stackcore/Stack.tsxFlex stack
Centercore/Center.tsxCentered flex container
FlexCentercore/FlexCenter.tsxFull-flex centred container
Buttoncore/Button.tsxPrimary action button
OutlineButtoncore/OutlineButton.tsxSecondary outlined button
Inputcore/Input.tsxText input
OTPInputcore/OTPInput.tsxPIN / OTP entry
Imagecore/Image.tsxImage with fallback
Flatlistcore/Flatlist.tsxTyped FlatList
ScrollViewcore/ScrollView.tsxTyped ScrollView
Pressablecore/Pressable.tsxTouchable area
Dividercore/Divider.tsxHorizontal rule
DashDividercore/DashDivider.tsxDashed divider
Loadercore/Loader.jsxFull-screen loading indicator
CountryPickercore/CountryPicker.jsxCountry selection
PhoneInputcore/PhoneInput.jsxPhone number input with flag

​
Common components

ComponentFileRole
BottomSheetModalcommon/BottomSheetModal.jsxReusable bottom sheet
ControlInputcommon/ControlInput.jsxReact Hook Form–controlled input
ScreenWrappercommon/ScreenWrapper.tsxSafe-area aware screen container
KeyBoardAvoidWrappercommon/KeyBoardAvoidWrapper.jsKeyboard-aware scroll wrapper
HtmlRendercommon/HtmlRender.jsxInline HTML renderer
NumberPickercommon/NumberPicker.jsxNumeric stepper

​
Build targets

# Development
npm run android
# or
react-native run-android

# Release bundle (generates APK via Gradle)
npm run release-build
The release-build script:
  1. Bundles JS with Metro
  2. Copies the bundle to android/app/src/main/assets/
  3. Runs ./gradlew assembleRelease

​
TypeScript configuration

The project extends @react-native/typescript-config/tsconfig.json and adds the ~ path alias. TypeScript is used for all new files; legacy files use .jsx. 
{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}
The project runs React Native 0.73 with the New Architecture disabled. Node.js 18 or later is required ("engines": { "node": ">=18" }).

Build docs developers (and LLMs) love

Get started for freeTalk to us