Skip to content

Production Mobile App Patterns

A React Native guide for coding agents. Also covers expo starter, app template, ai app, realtime audio, authentication starter, revenuecat starter.

Use this guide to choose an application shape before retrieving a task-sized implementation recipe. Each pattern and linked example is generic: rename the domain types, connect the interfaces to your backend, and verify package versions against the application you are building.

Choose the Smallest Architecture That Fits

Server-Mediated Generation

Keep provider secrets and authorization checks in an Expo Router API route or another trusted service. The client submits a validated command and renders durable job state. Give every submission an idempotency key so a retry cannot create duplicate work or consume usage twice.

Authentication and Protected Navigation

Put provider-specific login code behind an adapter. Store only the native credential needed to restore the session, refresh it through one single-flight path, and derive protected navigation from session state. Test redirect schemes in installed development and production builds.

Entitlements and Usage Limits

Model purchases, active entitlements, restoration, and metered usage separately. The device may present purchase UI, but a trusted service should authorize valuable work and apply usage changes atomically.

Realtime Media

Treat permission, audio-session configuration, peer connection state, interruptions, route changes, and teardown as one lifecycle. Mint short-lived connection credentials on a server and make cleanup safe to call more than once.

Durable Background Work

Persist a job before starting network work. Record its remote identifier, progress, retry state, and terminal result so the app can reconcile after navigation, connectivity loss, or process termination.

Social and Messaging Surfaces

Keep feeds, message lists, reaction controls, composers, and people discovery transport-neutral. Normalize server records at the boundary, use stable IDs for lists, and reconcile optimistic cache updates with authoritative responses.

Native Platform Boundaries

Hide files, incoming shares, native UI state, and optional native capabilities behind typed adapters. Platform-specific files should expose the same contract so product code does not branch throughout the component tree.

Recipe Map

Each topic contains copyable TypeScript or TSX examples plus the invariants needed to adapt them safely.

TaskRecipe topicIncluded examples
Restore sessions and protect routesauth-session-recipessession provider, protected layout, credential adapter, single-flight refresh
Validate and authorize server routesexpo-api-route-recipesauthenticated route helper, Zod parsing, provider adapter, idempotent command
Gate features and meter usagepurchases-and-usage-recipesentitlement provider, restore flow, atomic usage consumption
Receive shares and own playbackmedia-sharing-audio-recipesshare-intent routing, durable file import, playback ownership hook
Run a realtime voice sessionrealtime-audio-recipesshort-lived session route, peer setup, teardown, reconnect policy
Survive generation retries and restartsdurable-generation-recipespersisted job schema, queue upsert, submission, restart reconciliation
Isolate platform capabilitiesnative-platform-recipesplatform file split, native state, lazy capability factory
Fetch, validate, and render server datareact-native-data-client-recipesvalidated fetch, query options, cancellation, virtualized list, reducer
Add responsive motionreact-native-animation-recipespress feedback, swipe action, scroll header, reduced motion
Build a message timelinechat-component-recipesmessage row, retryable composer, anchored timeline, mentions
Add reactionsreaction-system-recipesnormalization, animated bar, people sheet, optimistic cache mutation
Compose rich textrich-text-composer-recipesdocument validation, typed editor bridge, mention list, pasted media
Accept content from other appsshare-extension-recipesapp config, native-intent route, durable draft, destination picker
Build a social feedsocial-feed-component-recipespost card, media grid, action bar, composer, people list, optimistic likes

Retrieve a topic directly when you know the boundary, or search in the language of the feature:

get-react-native-guide({
  query: "build an anchored chat timeline with optimistic reactions and a rich text composer"
})

Adoption Checklist

  • Confirm the installed Expo SDK, React Native version, and package compatibility.
  • Replace sample identifiers, redirect schemes, environment variables, and domain types.
  • Keep credentials and privileged authorization on a trusted service.
  • Validate every network and extension payload at its boundary.
  • Make commands idempotent and persist long-running state before starting work.
  • Test purchases, deep links, notification actions, and extensions in installed builds.
  • Add product-specific accessibility, observability, privacy declarations, and release profiles.

Public References

Use this guidance in your coding agent

Install the Better Design MCP once. Your agent then loads this page with one call.

get-react-native-guide({ topic: "production-template-patterns" })
claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer <YOUR_API_KEY>"
Browse related design systems