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.