name: react-native-with-expo-best-practices description: Expo and React Native architectural guidelines. This skill defines the standards for the mobile front-end, focusing on separation of concerns, type safety, atomic component composition, and efficient data handling. license: MIT metadata: author: gianllopez version: 1.0.0

React Native & Expo Best Practices

Comprehensive guide for Expo and React Native development using TypeScript. Contains rules prioritized by impact on maintainability, performance, and scalability.

When to Apply

Reference these guidelines when:

• Structuring the project folders or adding new features (app/ vs core/ vs components/).
• Creating UI components, deciding between integral or base/presets patterns.
• Implementing data fetching logic using react-query-kit and axios.
• Defining TypeScript interfaces or segregating domain types from library typings.
• Styling components using NativeWind (className) and handling conditional styles.
• Configuring Expo plugins, environment variables, or native directories.
• Writing functional helpers or configuring global store hooks.

Rule Categories by Priority

Quick Reference

1. Architecture & Core Structure (HIGH)

• arch-folder-structure - Enforce strict separation of app (Expo Router), core (Logic), and components (UI)
• arch-components-structure - Standards for Integral components vs the base/presets pattern for variants
• arch-typing-system - Segregate domain types from library typings using explicit imports
• arch-core-utilities - Functional helpers, centralized config constants, and library adapters

2. UI Engineering & Styling (HIGH)

• arch-style-nativewind - Use className with NativeWind and classnames for conditional logic

3. Data & Configuration (MEDIUM-HIGH)

• arch-api-data-layer - Centralized Axios and react-query-kit with safe return patterns
• conf-expo - Native config via plugins, strict Prettier sorting, and clean-state scripts

4. Coding Standards (LOW)

• arch-syntax-conventions - Short-hand iterators (u vs user), single-line type definitions, and event handler naming (handle* vs on*)

How to Use

Read individual rule files for detailed explanations and code examples:

rules/*.md