react-native-architecture

Overview

What is react-native-architecture?

react-native-architecture provides a practical blueprint for building scalable, production-ready React Native mobile applications. It focuses on using Expo, advanced navigation, native module integration, offline-first patterns, and robust project structure. This skill is designed for frontend developers and mobile teams who want to accelerate app delivery while following best practices.

Who should use this skill?

• Developers starting new React Native or Expo projects
• Teams implementing complex navigation or authentication flows
• Projects requiring native module integration or platform APIs
• Apps needing offline support and reliable state management
• Anyone optimizing React Native performance or setting up CI/CD for mobile

Problems it solves

• Reduces setup time with a proven project structure
• Clarifies when to use Expo vs Bare React Native
• Guides integration of native modules and platform APIs
• Supports offline-first and cross-platform development
• Helps maintain scalable, maintainable codebases

How to Use

Installation Steps

1. Add the skill to your agent with:

   npx skills add https://github.com/wshobson/agents --skill react-native-architecture
   

2. Open the SKILL.md file for a high-level overview and workflow guidance.
3. Review supporting files such as README.md, AGENTS.md, and metadata.json for deeper context.
4. Explore the rules/, resources/, references/, and scripts/ directories for implementation details and helper utilities.

Project Structure Overview

The recommended structure includes:

• src/app/: Expo Router screens, organized by navigation type (e.g., auth, tabs)
• src/components/: UI and feature-specific components
• src/hooks/: Custom React hooks
• src/services/: API and native service integrations
• src/stores/: State management logic
• src/utils/: Utility functions
• src/types/: TypeScript type definitions

Expo vs Bare React Native

• Expo: Easier setup, managed native modules, fast over-the-air updates
• Bare React Native: More control, manual native module linking, higher complexity
  Choose Expo for most projects unless you need custom native code not supported by Expo.

Adapting the Skill

Rather than copying files directly, adapt the architecture and patterns to fit your own repository, toolchain, and team conventions.

FAQ

What is the main benefit of react-native-architecture?

It provides a clear, scalable starting point for React Native projects, reducing setup time and technical debt.

Can I use this with existing React Native projects?

Yes, you can incrementally adopt the recommended structure and patterns to improve maintainability.

Is this skill only for Expo?

No. While Expo is recommended for most use cases, the architecture also supports Bare React Native when you need custom native integrations.

Where do I start after installation?

Begin with the SKILL.md file for an overview, then explore the file tree for detailed guidance and examples.

How do I see all available files and scripts?

Use the Files tab to browse the complete file tree, including nested references and helper scripts.