skills.rest
kinneyyan
kinneyyanCOMMUNITY
Explore all skills by this author →
Website𝕏@kinney_yanGitHub

react-native-architecture

Scaffold scalable React Native apps with Expo Router and React Query.

2|Updated Sep 11, 2025
Search Tags:#architecture#patterns#offline#navigation#react-native#expo#architect
One-click install
npx skills add https://github.com/kinneyyan/prompts --skill react-native-architecture-kinneyyan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-architecture
Source: https://github.com/kinneyyan/prompts/tree/main/claude-code/plugins/frontend-big-brother/skills/react-native-architecture
Command: npx skills add https://github.com/kinneyyan/prompts --skill react-native-architecture-kinneyyan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides production-ready patterns and project structure for building scalable React Native apps with Expo, robust navigation, and native module integrations.

Core Features & Use Cases

  • Expo Router navigation patterns for scalable screen architecture.
  • Authentication and state management workflows tailored for mobile apps.
  • Offline-first data handling using React Query to cache and synchronize data.
  • Native module integration guidance and cross-platform performance optimizations.
  • Platform-specific UI considerations and code organization for iOS and Android.

Quick Start

Create a new Expo project and bootstrap your architecture quickly:

  • npx create-expo-app@latest my-app -t expo-template-blank-typescript
  • cd my-app
  • npx expo install expo-router expo-status-bar react-native-safe-area-context
  • npx expo install @react-native-async-storage/async-storage
  • npx expo install expo-secure-store expo-haptics
  • Start the project with: npx expo start

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 scalable React Native app with Expo Router?▼

Structure a scalable React Native app by applying production-ready Expo Router patterns for navigation, organizing platform-specific directories, and integrating React Query for state management and offline data caching.

What is the best way to implement offline-first data handling in React Native?▼

Implement offline-first data handling in React Native using React Query to cache data locally and synchronize it automatically when network connectivity is restored.

How do I bootstrap a new Expo project with TypeScript and navigation?▼

Bootstrap a new Expo project by running npx create-expo-app with the blank TypeScript template, then installing expo-router, react-native-safe-area-context, and async-storage for navigation and local storage.

Can I integrate native modules while building cross-platform React Native apps?▼

Yes, you can integrate native modules in cross-platform React Native apps by following specific guidance for cross-platform performance optimizations and platform-specific code organization for iOS and Android.

Does this React Native architecture pattern support authentication workflows?▼

Yes, this React Native architecture pattern supports authentication workflows by utilizing expo-secure-store for credential persistence and providing tailored state management workflows for mobile apps.

When do I need to organize platform-specific UI code in React Native?▼

Organize platform-specific UI code in React Native when your app requires distinct interface considerations or native module integrations that behave differently across iOS and Android platforms.

Related Skills

Explore More Software Engineering Skills→
partme-aipartme-ai
610

react-native-project-creater

Initialize and configure new React Native projects with a single command.

Official
Basic
EvanBaconEvanBacon
571

universal-theme

Automate cross-platform theme management for iOS, Android, and Web apps.

Community
Advanced
puzzo-devpuzzo-dev

Frappe UI

Provide Vue 3 components and data-fetching utilities for Frappe apps.

Community
Intermediate
crozzbitecrozzbite

react-native

Implement consistent React Native patterns for Expo and bare workflow apps.

Community
Advanced