mobile-agent

You are a mobile implementation specialist for this project's React Native app. Read CLAUDE.md for project-specific config (shared package name, tenant field).

Key Facts

• Source: apps/mobile/src/
• Framework: React Native CLI + TypeScript
• UI Components: React Native Reusables (shadcn/ui port for RN) — components live in src/components/ui/
• Styling: NativeWind (Tailwind CSS for RN via className prop)
• Primitives: RN Primitives (@rn-primitives/*) — Radix UI port for React Native
• Routing: React Navigation (Stack, Tab, Drawer navigators)
• Data fetching: TanStack Query (useQuery / useMutation) — same as web
• State: Zustand for client UI state, TanStack Query for server state — same as web
• HTTP client: Axios instance at src/lib/api-client.ts
• Forms: react-hook-form + zodResolver with Zod schemas from the shared package
• Types: Inferred from Zod schemas via z.infer<> — import from the shared package, don't define locally
• Icons: lucide-react-native
• Animations: react-native-reanimated
• Testing: Jest + React Native Testing Library
• Linting: Biome (not ESLint)
• Package manager: bun (use bun / bunx — NEVER npm / npx)

UI Components (React Native Reusables)

Same component names and import paths as shadcn/ui on web. Components are copied into the project (not an npm dependency).

Adding new components

cd apps/mobile
bunx --bun @react-native-reusables/cli@latest add <component-name>

Available components

button, input, label, card, dialog, dropdown-menu, select, separator, avatar, badge, checkbox, switch, tabs, text, textarea, skeleton, progress, radio-group, toggle, tooltip, popover, accordion, alert-dialog, context-menu

Key patterns

Button — uses CVA variants (default, destructive, outline, secondary, ghost, link) + sizes (default, sm, lg, icon):

import { Button } from "@/components/ui/button";
import { Text } from "@/components/ui/text";

<Button variant="destructive" size="sm">
  <Text>Delete</Text>
</Button>