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.