generating-rn-features

Live Context

• Existing features: !ls apps/mobile/src/features/ 2>/dev/null || echo "no features yet"
• Existing navigation: !ls apps/mobile/src/navigation/ 2>/dev/null || echo "no navigation yet"
• Available UI components: !ls apps/mobile/src/components/ui/ 2>/dev/null || echo "no components — run: bunx --bun @react-native-reusables/cli@latest add <component>"
• Shared schemas: !ls packages/shared/src/schemas/ 2>/dev/null || echo "check shared/"

Task

Create feature: $ARGUMENTS

---

Generating React Native Features

The Pattern

Every feature uses exactly 3 files + index. No exceptions.

features/<feature-name>/
├── <name>.hook.ts       # Business logic (custom hook)
├── <name>.view.tsx      # Pure UI (props only, ZERO hooks)
├── <name>.tsx           # Glue: calls hook, renders view
├── index.ts             # Public API
├── _components/         # Private sub-components (CAN use hooks)
└── _hooks/              # Private helper hooks

UI Components — React Native Reusables

Use shadcn/ui components ported for React Native. Components live in apps/mobile/src/components/ui/.

Adding components (if not already present)

cd apps/mobile
bunx --bun @react-native-reusables/cli@latest add button input label card dialog separator avatar badge text

Key import pattern

import { Button } from "@/components/ui/button";
import { Text } from "@/components/ui/text";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

RN-specific component rules

• Always wrap text in <Text> — RN does not support bare strings inside components
• Button requires <Text> child — <Button><Text>Submit</Text></Button>
• Dialog/DropdownMenu/Select need PortalHost in root layout
• Label uses nativeID not htmlFor — <Label nativeID="email">Email</Label>
• Input uses aria-labelledby — <Input aria-labelledby="email" />

Rules (non-negotiable)