react-native-architecture

Set up Expo Router navigation, React Query persistence, and secure auth in React Native.

Updated Mar 5, 2026
One-click install
npx skills add https://github.com/truongnat/emplus --skill react-native-architecture-truongnat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-architecture
Source: https://github.com/truongnat/emplus/tree/main/.agents/skills/react-native-architecture
Command: npx skills add https://github.com/truongnat/emplus --skill react-native-architecture-truongnat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of designing a scalable, production-grade React Native codebase by providing proven structure, navigation patterns, state and data management approaches, native integrations, and offline-first behavior so teams can build faster and avoid common architectural pitfalls.

Core Features & Use Cases

  • Production project structure for Expo Router: Organizes screens, components, hooks, services, stores, and utilities for maintainable growth.
  • Navigation patterns with Expo Router: Implements tab-based navigation, dynamic routes, and programmatic routing with parameters for real app flows.
  • Offline-first data and auth foundations: Uses React Query persistence with offline synchronization patterns and route protection with secure token storage.
  • Native integration playbook: Shows how to integrate device capabilities (e.g., haptics, biometrics, push notifications) safely and consistently.
  • Performance-focused UI patterns: Provides guidance for smooth rendering using optimized list components and memoization strategies.

Quick Start

Create a new Expo app for your project and apply the recommended src layout, Expo Router navigation setup, and a QueryProvider + AuthProvider foundation for offline-first behavior.

Frequently Asked Questions about react-native-architecture

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

FAQPage Schema
How do I structure a production React Native app with Expo Router for maintainable growth?

To structure a production React Native app with Expo Router, organize screens, components, hooks, services, stores, and utilities into a scalable source layout. This structure prevents common architectural pitfalls and supports maintainable growth as your application scales.

How do I implement offline-first data synchronization in React Native using React Query?

Implement offline-first data synchronization in React Native by configuring React Query persistence with offline synchronization patterns. This ensures your app maintains data consistency and functionality when network connectivity is lost or unreliable.

What is the best way to set up authentication flows and secure token storage in Expo?

Set up authentication flows in Expo by implementing route protection alongside secure token storage. This approach secures your application by ensuring only authorized users access protected routes while safely managing sensitive credentials.

Can I integrate device biometrics and push notifications safely in React Native?

Yes, you can integrate device capabilities like biometrics and push notifications safely in React Native. Use a native integration playbook to ensure consistent, platform-aware usage of native modules across iOS and Android environments.

How do I optimize React Native rendering performance for complex lists?

Optimize React Native rendering performance for complex lists by applying performance-focused UI patterns. Utilize optimized list components and memoization strategies to achieve smooth rendering during scrolling and data updates.

Does Expo Router support complex routing with dynamic routes and programmatic navigation?

Yes, Expo Router supports complex routing scenarios including tab-based navigation, dynamic routes, and programmatic routing with parameters. These patterns handle real application navigation flows effectively for production environments.