mobile-react-native_skill

This skill helps you build production-ready React Native mobile apps for iOS and Android by applying organization, navigation, performance, and testing best

Python

13

GitHub Stars

2

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill williamzujkowski/standards --skill mobile-react-native

REFERENCE.md19.9 KB
SKILL.md11.0 KB

Overview

This skill provides a practical, production-focused guide to React Native mobile development for iOS and Android. It covers core components, navigation (React Navigation v6), state management patterns, native module integration, and performance tuning for production-ready apps. The content emphasizes battle-tested standards and quick-start patterns to bootstrap projects reliably.

How this skill works

The skill inspects common mobile app needs and prescribes concrete implementations: UI layout and list rendering (FlatList), navigation stacks/tabs/drawers, styling and platform-specific variants, plus state management with Redux Toolkit, Zustand, and React Query. It also outlines native bridge usage, testing strategies (Jest, RN Testing Library, Detox), and deployment workflows for App Store and Play Store. Checklists and optimization tips help harden apps for production.

When to use it

Starting a new cross-platform React Native project and need a production-ready baseline
Implementing performant long lists or complex navigation flows
Integrating native features or third-party native modules
Hardening an app for release: testing, profiling, and store deployment
Choosing a state-management approach for local and server state

Best practices

Use FlatList and virtualization for long lists and memoize item components with React.memo
Prefer typed navigation and consistent navigation architecture (stack + tabs/drawers as needed)
Optimize images and defer heavy work with InteractionManager for smooth frames
Keep platform-specific code minimal; use Platform API and platform-specific files where necessary
Enforce CI checks: linting, unit tests, coverage thresholds, and dependency vulnerability scans

Example use cases

Build a shopping app with nested stack and tab navigation, paginated FlatList product feeds, and image optimization
Implement an offline-capable news reader using React Query and local caching with Redux or Zustand
Add a native camera or biometrics integration via a bridged native module for platform-specific features
Set up E2E tests with Detox and unit/component tests with Jest and React Native Testing Library before release
Deploy OTA updates and configure store submissions with production signing and metadata checks

FAQ

Use Redux Toolkit for complex global state, normalized data, and predictable patterns. Choose Zustand for small-to-medium apps that favor simplicity and minimal boilerplate.

How do I ensure good performance on both platforms?

Use FlatList, memoize expensive components, optimize images, profile with built-in tools, and offload heavy work using InteractionManager or native modules when appropriate.