Introduction

The App component is the React Native mobile application for the system. It provides the authenticated mobile experience on both iOS and Android from a single codebase and consumes the RawStack API for server-side data.

The codebase is a React Native application with shared TypeScript code and platform-specific iOS and Android projects for native build and runtime configuration.

Tech specification

The App currently uses:

• React Native 0.82
• React 19
• TypeScript
• React Navigation v7
• TanStack React Query v5
• AsyncStorage
• React Hook Form
• Zod
• Styled Components v6
• react-native-config
• react-native-bootsplash

Architecture

The App frontend keeps presentation, data fetching, and API interaction separate so the codebase is easier to understand and customise.

UI

The UI is built around React Navigation. A tab navigator provides the main top-level navigation, while stack navigators handle nested flows inside each area of the app.

Shared UI is implemented with reusable React Native components, while styling is handled with Styled Components. Only light default theming is applied so it is easier to customise the interface and apply your own branding without first undoing a heavily opinionated design system.

Forms are handled with React Hook Form and validated with Zod before submission.

Data and API

State management is intentionally minimal. The App uses lightweight local and shared state where needed, TanStack React Query for server state, caching, background refetching, and optimistic updates, and AsyncStorage for persistent local storage such as tokens and cached values.

This avoids introducing a heavier state management library before one is clearly needed. Because different projects have different requirements, the codebase aims to stay simple and approachable so you can customise it without first learning an unnecessary abstraction.

The App communicates with the backend through the same API layer used elsewhere in the platform, which helps keep mobile behaviour aligned with the API contract while still fitting naturally into a React Native application structure.

Directory structure

The main project structure looks like this:

apps/app/
  src/
	navigation/
	screens/
	components/
	hooks/
	lib/
	types/
  ios/
  android/
  .env.dist
  package.json

• src/navigation: React Navigation setup
• src/screens: screen-level components
• src/components: shared UI components
• src/hooks: reusable hooks for API access, storage, and UI behaviour
• src/lib: utilities and shared configuration
• src/types: TypeScript types used across the app
• ios and android: native platform projects used for building and releasing the app