react-native-patterns

Topics in the source

• React Native / Expo Patterns
• When to Activate
• Core Concepts
• Project structure (Expo Router)
• Navigation: validate route params
• State: keep concerns separate
• Data fetching: a cache library + Zod
• Lists: virtualize, never map a big array in a ScrollView

Practical patterns for building production React Native apps with Expo. Covers navigation, state, data fetching, lists, styling, and native APIs. Pairs with the rules/react-native/ ruleset: rules say what to enforce, this skill shows how. Libraries named below (NativeWind, Zustand/Jotai, TanStack Query) are common, well-established options shown for illustration — the patterns matter more than the specific package, and any equivalent works. Zod is used for validation to stay consistent with ECC's existing typescript/ rules. These patterns assume the managed Expo workflow (Expo Router, EAS, expo- modules) on the New Architecture (the default in recent Expo SDKs, mandatory from SDK 55+). They do NOT assume the browser DOM — React Native has no , no URL bar, and no web data-fetching defaults. Use this skill when: Building or editing React Native / Expo screens, components, or navigation Setting up routing with Expo Router (file-based app/ directory) Deciding where state belongs (server cache vs client store vs route params vs form) Wiring data fetching with TanStack Query and validating responses with Zod Rendering long or heavy lists Choosing or applying a styling approach (NativeWin

This is an excerpt. Refer to the complete source and its current requirements.