Build Rn Component

---
description: Build a React Native component using test-first development. Supports simple and compound components with separate files per sub-component.
argument-hint: "ComponentName 'description' [--image path/to/design.png]"
---

Build a React Native component for the current project directory using the spec below. If $ARGUMENTS is empty, ask the user for: component name, description, props, behaviors, and whether it needs sub-components.

## Spec (from $ARGUMENTS and conversation context)

Parse $ARGUMENTS as: `ComponentName "description" [--image path]`

Ask the user to clarify anything that is ambiguous before starting.

## Conventions

- **Tests first**: Write the full test file before writing any implementation. Tests must cover: render, each prop variant, user interactions (press/change), edge cases, and accessibility.
- **Compound components**: When sub-components are needed, each gets its own `.tsx` and `.test.tsx`. An `index.ts` barrel wires static assignments (e.g. `SegmentedControl.Item = SegmentedControlItem`). Never co-locate child components in the parent file.
- **File structure** for a compound component:

ComponentName/ ComponentName.tsx ComponentName.test.tsx ChildComponentName.tsx ChildComponentName.test.tsx index.ts

- **index.ts** uses `Object.assign` for type-safe static assignment:
```ts
import { SegmentedControl as Base } from './SegmentedControl';
import { SegmentedControlItem } from './SegmentedControlItem';
export const SegmentedControl = Object.assign(Base, { Item: SegmentedControlItem });

• No default exports — named exports only.
• Use @testing-library/react-native for all tests.
• Use testID props on root elements for test targeting.

Loop

Repeat until all tests pass:

1. Scaffold — Create the directory and stub files (component + test for each file in the set). Use the Write tool.
2. Write tests — Fill in the full test file for one component at a time. Do not skip edge cases.
3. Write implementation — Implement the component to satisfy the tests.
4. Run tests — npx jest <testFile> --no-coverage --no-color from the component directory.
5. Fix — If tests fail, edit the implementation (prefer Edit over rewriting the whole file) and run again.
6. Once the parent tests pass, repeat steps 2–5 for each sub-component.
7. Verify barrel — Confirm index.ts exports and static assignments are correct.

Screenshot handling

If --image is provided, read the image file and use it to infer: layout direction, spacing, border styles, colors, selected/unselected states, and any visible text. Match the visual design in the implementation.

Done signal

When all test files pass, print a summary:

• Files created
• Tests passing
• Usage example showing the compound API (e.g. <SegmentedControl><SegmentedControl.Item .../></SegmentedControl>)