react-native-architecture

Implements React Native apps with Expo Router navigation, offline sync, and native module integrations.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building production React Native apps requires coordinating navigation, authentication, offline data sync, native APIs, and app store deployment, and this Skill provides tested patterns for each of these concerns. ## Core Features & Use Cases - Expo Router Navigation: File-based routing with tab layouts, dynamic routes, auth groups, and programmatic navigation. - Offline-First Data: React Query with AsyncStorage persistence, optimistic mutations, and network status syncing via NetInfo. - Native Integrations: Ready-made services for haptics, biometric authentication, and push notifications with platform-specific handling. - Use Case: When starting a new Expo project, apply the provided project structure, auth provider with SecureStore token handling, and EAS build profiles to reach a deployable app without designing the architecture from scratch. ## Quick Start Set up a new Expo React Native project with tab navigation, authentication flow, and offline-first data fetching using React Query.

Frequently Asked Questions about react-native-architecture

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

FAQPage Schema
How do I set up navigation in an Expo React Native app?

Use Expo Router with file-based routing: define screens in the app directory, group them with folders like (tabs) and (auth), and configure layouts with Stack or Tabs components. Navigate programmatically with router.push, router.replace, and router.back.

Expo vs bare React Native: which should I choose?

Expo offers lower setup complexity, built-in OTA updates, and EAS Build for native modules, while bare React Native gives direct native code access. Expo supports custom native code through config plugins, covering most production needs.

How do I implement offline-first data sync in React Native?

Combine React Query with AsyncStorage persistence using PersistQueryClientProvider, set networkMode to offlineFirst, and sync online status via NetInfo. Use optimistic mutations with rollback on error for a responsive offline experience.

Does Expo support push notifications and biometric authentication?

Yes, expo-notifications handles push tokens and notification channels on Android and iOS, while expo-local-authentication provides biometric prompts with hardware and enrollment checks. Both require permission requests at runtime.

How do I build and submit an Expo app to app stores?

Configure build profiles in eas.json for development, preview, and production, then run eas build per platform and eas submit for store delivery. Use eas update to push OTA updates to a branch without a full rebuild.

Why is my React Native list scrolling slowly?

FlatList struggles with large datasets; switch to FlashList with estimatedItemSize, memoized row components, and stable keyExtractor callbacks. Also avoid inline styles and fetching data during render.