skills.rest
ps-carvalho
ps-carvalhoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-native-patterns

Guide React Native 0.73+ development with New Architecture and Expo Router patterns.

Updated Mar 12, 2026
Search Tags:#performance#state management#navigation#mobile development#react native#expo#new architecture
One-click install
npx skills add https://github.com/ps-carvalho/spavn-agents --skill react-native-patterns-ps-carvalho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-patterns
Source: https://github.com/ps-carvalho/spavn-agents/tree/main/.opencode/skills/react-native-patterns
Command: npx skills add https://github.com/ps-carvalho/spavn-agents --skill react-native-patterns-ps-carvalho

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides best practices and patterns for building robust, performant, and maintainable React Native applications, especially leveraging the New Architecture and modern tooling.

Core Features & Use Cases

  • Project Structure Guidance: Offers a recommended directory layout for scalable RN projects.
  • Navigation Patterns: Demonstrates best practices for React Navigation and Expo Router.
  • State Management: Implements recommended patterns using Zustand and React Query.
  • Performance Optimization: Details techniques for optimizing FlatList, animations, and general app performance.
  • New Architecture Integration: Explains how to use Turbo Native Modules and Fabric.
  • Platform-Specific Code: Shows how to handle iOS and Android differences effectively.
  • Testing Strategies: Outlines a comprehensive testing approach from unit to E2E.
  • Distribution & OTA Updates: Covers EAS Build, submission, and Over-The-Air updates.

Quick Start

Use the react-native-patterns skill to generate a basic project structure for a new React Native application.

Frequently Asked Questions about react-native-patterns

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

FAQPage Schema
How do I structure a scalable React Native project with Expo Router?▼

To structure a scalable React Native project, follow a recommended directory layout that separates features, components, and navigation. Expo Router integrates seamlessly into this structure to handle routing efficiently.

What is the best way to manage state in React Native using Zustand and React Query?▼

The best way to manage state in React Native combines Zustand for lightweight global state with React Query for server data. This pattern separates client-side UI state from asynchronous server fetching.

How does the React Native New Architecture work with Turbo Native Modules and Fabric?▼

The New Architecture in React Native works by enabling Turbo Native Modules for synchronous, type-safe native code access and Fabric for concurrent UI rendering. These features significantly improve overall app performance.

How do I optimize FlatList performance and animations in React Native 0.73+?▼

Optimize FlatList performance in React Native 0.73+ by implementing specific rendering techniques and memory management. Animation optimization leverages the New Architecture to ensure smooth 60fps frame rates.

Can I use EAS Build for React Native OTA updates and app store submissions?▼

Yes, you can use EAS Build to handle React Native OTA updates and app store submissions. It manages distribution workflows, allowing seamless Over-The-Air updates and automated deployment to both iOS and Android.

What testing strategies should I use for React Native applications?▼

A comprehensive React Native testing strategy spans from unit tests for individual components to end-to-end tests for user flows. This ensures robust coverage across platform-specific behaviors and application logic.

Related Skills

Explore More Software Engineering Skills→
treesus6treesus6
1

erne-init

Initialize ERNE to configure agents, hooks, MCP servers, and dashboard for React Native and Expo projects.

Community
Advanced
RitenoobRitenoob

eas-mobile-deployment

Manage EAS builds, submissions, and OTA updates for the RidenDine mobile app.

Community
Advanced
CJHarmathCJHarmath

rn-testing

Test React Native apps using Jest and React Native Testing Library patterns.

Community
Intermediate
HsnSaboorHsnSaboor

mobile-development

Guide cross-platform and native mobile app development with React Native, Flutter, Swift, and Kotlin.

Community
Advanced