react-native-architecture

Design React Native app architecture with Expo Router, authentication, and offline data.

Updated May 16, 2026
One-click install
npx skills add https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory --skill react-native-architecture-p-o-ke-nae
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-architecture
Source: https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory/tree/main/.github/skills/react-native-architecture
Command: npx skills add https://github.com/p-o-ke-nae/pokemondamagecalculatorforstory --skill react-native-architecture-p-o-ke-nae

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design and implement production-ready React Native applications with clean structure, reliable navigation, and platform-aware integrations.

Core Features & Use Cases

  • App Architecture: Organize Expo and React Native projects with scalable folder structure, providers, and reusable components.
  • Navigation and State: Implement routing, authentication flows, and offline-first data handling with React Query patterns.
  • Native and Platform Support: Integrate haptics, biometrics, notifications, and platform-specific code for iOS, Android, and web.
  • Use Case: Use this Skill when building a new mobile app that needs tabs, protected routes, cached data, and polished native interactions.

Quick Start

Ask for a React Native architecture plan for an Expo app with routing, authentication, offline sync, native modules, and performance optimization.

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 and offline-first data?▼

To structure a production React Native app, implement Expo Router for navigation, React Query persistence for offline-first data handling, and a scalable folder structure for providers and reusable components.

What is the best way to handle authentication flows and protected routes in Expo?▼

The best way to handle authentication flows in Expo is by using Expo Router for protected routes combined with secure storage to manage user sessions and gate navigation securely.

Can I integrate native modules and platform-specific files for iOS and Android in React Native?▼

Yes, you can integrate native modules and platform-specific files in React Native by implementing cross-platform patterns that support iOS, Android, and web, including native interactions like haptics and biometrics.

How do you implement offline sync and cached data in a React Native mobile app?▼

Implement offline sync and cached data in React Native by using React Query persistence patterns to manage offline-first data, ensuring data remains available and synchronized without a constant network connection.

Does this React Native architecture approach support performance optimization and notifications?▼

Yes, this React Native architecture approach supports performance optimization and notifications by requiring patterns for polished native interactions, cross-platform implementation, and efficient data fetching.

When do I need platform-specific code for native interactions like haptics in a React Native app?▼

You need platform-specific code for native interactions like haptics when your React Native app requires polished, hardware-level feedback and biometric authentication tailored to iOS, Android, and web environments.