Core Concepts

RNCopilot is built on a set of carefully chosen architectural decisions. This section explains the why and how behind every major subsystem in the template.

Each page below is self-contained, but reading them in order gives you the most complete picture of how the pieces connect.

What You’ll Learn

Page	Summary
Architecture	Tech stack, provider hierarchy, graceful Supabase init, and the overall data flow.
Theme System	Indigo + Teal palette, semantic token categories, light/dark modes, and responsive metrics.
Styling with Unistyles	`StyleSheet.create` with theme callbacks, the variants API, compound variants, breakpoints, and the three styling laws.
State Management	Two-layer architecture with React Query (server) and Zustand (client), selector patterns, and the auth store.
Routing	File-based routing with Expo Router, tab navigation, typed routes, and path aliases.
Internationalization	react-i18next setup with EN/AR, RTL support, translation key conventions, and Zod integration.
Authentication	Zustand-based auth store, `useAuthInit()`, Supabase integration, route protection, and non-React access.
API Integration	Axios client with auth and error interceptors, React Query hooks, and the query key factory pattern.
Forms & Validation	Schema-first Zod validation, react-hook-form integration, `FormField` wrapper, and i18n error messages.
Storage	react-native-mmkv with typed keys, `useStorage` / `useStorageBoolean` hooks, and result objects.

How Everything Connects


app/_layout.tsx
  |
  +-- ErrorBoundary          (catches unhandled errors)
  |     +-- QueryProvider    (TanStack React Query + MMKV persister)
  |           +-- BottomSheetModalProvider
  |                 +-- AppContent
  |                       +-- useAuthInit()   (Zustand auth store)
  |                       +-- RootNavigator   (expo-router Stack)
  |                             +-- (main)/(tabs)/
  |                                   +-- Home
  |                                   +-- Settings

Every screen has access to:

Theme tokens via StyleSheet.create((theme) => ({...})) — no imports needed, the theme is injected automatically.
Translations via useTranslation() from react-i18next.
Auth state via useAuthStore((s) => s.user) from Zustand.
Server data via React Query hooks defined in feature modules.
Persistent storage via useStorage / useStorageBoolean hooks backed by MMKV.