PromptFork

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.

Open in Studio
Prompt
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.
#react-native#expo#typescript#component#mobile
Source
promptfork seed
License
CC-BY-4.0
Published
6/22/2026

More prompts you might like

Build an accessible React Native form component with inline validation

Produces a typed, reusable React Native form with controlled inputs, inline validation, accessible error messaging, and submit/disabled states instead of wiring each field by hand.

#react-native#expo
New

Build an offline-first React Native data-fetching hook and list component

Produces a typed useOfflineQuery hook with cache-first reads, optimistic revalidation, and retry-on-reconnect, plus a FlatList that renders loading, empty, error, stale, and offline states honestly.

#react-native#expo
New

Next.js 15 App Router page with streaming, caching, and server data

Scaffold a production App Router page: Server Component data fetching, Suspense streaming for instant TTFB, correct cache strategy (fetch cache vs unstable_cache vs revalidatePath), loading/error boundaries, and generateMetadata — with the non-obvious patterns most tutorials skip.

New

Tailwind analytics dashboard with animated stat cards, dark mode, and skeleton loading

Production-grade dashboard layout: KPI cards with counting animations and trend sparklines, a chart area, activity table — all with dark mode, skeleton loading states, and responsive breakpoints defined to the pixel.

New

Supabase RLS: owner-write, public-read policies for a table

Generate correct, non-recursive RLS policies so anyone reads published rows and only owners edit their own.

New

Stripe webhook handler with signature verify + idempotency

Production-ready Stripe webhook route that verifies the signature and processes events exactly once.

New