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