react-native-dev

Guide React Native and Expo app development with routing, state, networking, testing, and release planning.

2|Updated May 3, 2026
One-click install
npx skills add https://github.com/Rosetears520/aili-workflows --skill react-native-dev-rosetears520
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-dev
Source: https://github.com/Rosetears520/aili-workflows/tree/main/skills/react-native-dev
Command: npx skills add https://github.com/Rosetears520/aili-workflows --skill react-native-dev-rosetears520

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and implement reliable, high-performance React Native and Expo apps without re-solving common pitfalls in routing, UI performance, state, networking, testing, and release setup.

Core Features & Use Cases

  • Production guidance for Expo Router navigation boundaries: Use it to structure routing choices, modals/sheets, deep links, and header behaviors in a way that avoids architectural drift.
  • Performance-first implementation rules: Use it to avoid slow lists, heavy bundles, janky animations, and excessive re-renders by adopting FlashList, expo-image, Reanimated 3, and memo/selector patterns.
  • End-to-end app engineering workflow: Use it to bootstrap new projects, set up networking/state/form handling patterns, add unit/component/E2E testing approaches, and follow release/shipping checklists with EAS expectations.

Quick Start

Use the react-native-dev skill to generate a production-ready Expo (or React Native) app plan for routing, UI/performance strategy, state and networking structure, testing approach, and release checklist.

Frequently Asked Questions about react-native-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure Expo Router navigation boundaries for modals and deep links?▼

Expo Router navigation boundaries structure modals, sheets, deep links, and header behaviors to prevent architectural drift. Establish routing conventions early to maintain predictable navigation state and avoid deep-linking issues in production.

How do I optimize React Native list rendering and animation performance?▼

Optimize React Native performance by adopting FlashList for lists, expo-image for images, and Reanimated 3 for animations. Apply memo and selector-based state updates to reduce excessive re-renders and eliminate janky scrolling.

What is the best way to set up testing and release workflows for an Expo app?▼

Set up Expo app testing and release workflows by implementing unit, component, and E2E testing approaches alongside EAS build submissions. Follow pre-shipping validation checklists to ensure production delivery reliability.

Can I use Reanimated 3 for complex animations without impacting app performance?▼

Reanimated 3 supports complex animations on the UI thread but requires following specific performance constraints. Adhering to Reanimated 3 implementation rules prevents janky animations and bundle overhead in Expo apps.

How do I manage state and form validation in a production React Native app?▼

Manage React Native state and forms using selector-based state updates and structured form validation patterns. This approach minimizes unnecessary re-renders and ensures reliable data handling across networking requests.