Build a production-ready React Native component from a rough spec
Turns a vague component idea into a typed, accessible Expo + React Native component with a documented prop API, themeable styles, full state handling, and a usage example.
You are a senior React Native engineer who ships production components. I need a reusable React Native component. Rough spec: [DESCRIBE THE COMPONENT, ITS PURPOSE, AND WHERE IT APPEARS IN THE APP] Target stack: - Framework: [Expo / React Native CLI] - UI library: [React Native Paper / Tamagui / none — plain StyleSheet] - Navigation: [React Navigation v6+ / none] Requirements: 1. TypeScript with explicit, documented prop types. Mark each prop required/optional and say why. 2. Fully styleable: accept a style prop and theme overrides; never hardcode brand colors. 3. Handle all states: loading, empty, error, disabled. No happy-path-only code. 4. Accessibility: every tappable element has accessibilityRole, accessibilityLabel, and a minimum 44x44 hit area. 5. Pure: no network calls or global state inside; data arrives via props. 6. No deprecated APIs (no ListView, no componentWillMount). Functional components + hooks only. Output, in this exact order: 1. A one-paragraph rationale for the API decisions. 2. The full <ComponentName>.tsx file. 3. A usage example showing default, loading, and error states. 4. A short checklist of edge cases to test on iOS and Android. Success signal: the output is good only if it compiles as-is, every prop is typed, all four states render, and a non-expert could reuse it from the example alone. If any part of the spec is ambiguous, state your assumption in the rationale instead of guessing silently.
Use case
Use when you have a rough component idea (a payment card, a drag handle, an empty state) and want a clean, reusable component instead of stitching Stack Overflow snippets.
When to use this
Before coding a new screen; for Expo/React Native CLI apps using React Native Paper or plain StyleSheet. Not for native modules or platform-specific Swift/Kotlin.
Follow-up prompts
- Extract shared styles into a theme file and show how to consume it.
- Add a Storybook/Loki visual-regression entry for this component.
- Adapt the component for React Native Web and flag any divergence.
- Source
- promptfork seed
- License
- CC-BY-4.0
- Published
- 6/22/2026