skills.rest
mirzadham
mirzadhamCOMMUNITY
Explore all skills by this author →
GitHub

react-native-patterns

Implements React Native and Expo patterns for navigation, state, data fetching, lists, and styling.

Updated May 7, 2026
Search Tags:#zod#react native#tanstack query#expo#expo router#flatlist#mobile patterns
One-click install
npx skills add https://github.com/mirzadham/trainingroombookingsystem2 --skill react-native-patterns-mirzadham
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-patterns
Source: https://github.com/mirzadham/trainingroombookingsystem2/tree/main/.pi/skills/react-native-patterns
Command: npx skills add https://github.com/mirzadham/trainingroombookingsystem2 --skill react-native-patterns-mirzadham

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React Native and Expo development involves mobile-specific decisions that web React patterns do not cover: validating deep-link route params, separating server state from client state, virtualizing long lists, and storing tokens securely. This Skill provides concrete, production-oriented patterns for each of these concerns. ## Core Features & Use Cases - Expo Router Navigation: File-based routing with thin route files and Zod validation of untrusted deep-link parameters. - State Separation: Clear ownership rules for server state (TanStack Query), client state (Zustand/Jotai), route params, and form state (React Hook Form). - Data Fetching & Validation: TanStack Query hooks with Zod schema parsing at the API boundary, plus explicit loading, error, and empty states. - Performance & Native APIs: FlatList/FlashList virtualization, memoized render items, NativeWind or StyleSheet styling, and hooks wrapping Expo modules like Location and SecureStore. - Use Case: When building an orders screen in an Expo app, use this Skill to wire a validated route, a Zod-parsed query, and a virtualized list with pull-to-refresh in one consistent pattern. ## Quick Start Ask the AI to build an Expo screen that fetches a list of items with TanStack Query, validates the response with Zod, and renders it in a FlatList with loading and error states.

Frequently Asked Questions about react-native-patterns

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

FAQPage Schema
How do I fetch data in React Native with TanStack Query?▼

Use useQuery with a queryKey and a queryFn that parses the API response with a Zod schema before returning it. For mutations, use useMutation and invalidate the relevant queryKey on success to keep server state fresh.

How to validate route params in Expo Router?▼

Read params with useLocalSearchParams and parse them with a Zod schema before use, since deep links deliver untrusted strings. On validation failure, redirect to a not-found route with router.replace.

Should I use FlatList or ScrollView for long lists in React Native?▼

Use FlatList for any long or dynamic list because it virtualizes rows and keeps memory low; ScrollView with map renders every item at once and causes jank. For very large or heterogeneous lists, use Shopify's FlashList.

Where should I store auth tokens in an Expo app?▼

Store tokens in expo-secure-store, which uses iOS Keychain and Android Keystore for encrypted storage. AsyncStorage is not encrypted and should only hold non-secret persisted data.

NativeWind vs StyleSheet: which styling approach for React Native?▼

Both are valid; the key rule is to pick one system and stay consistent. Avoid inline style objects on hot render paths—use StyleSheet.create at module scope or NativeWind className utilities instead.

When should server data go into a Zustand store in React Native?▼

It should not. Copying server data into a client store creates two sources of truth and stale data. Let TanStack Query own server state and keep client stores for genuine UI-only state.

Related Skills

Explore More Software Engineering Skills→
Yash-AwasthiYash-Awasthi

expo-architect

Scaffolds Expo React Native apps with file-based routing, screens, and optional Clerk authentication.

Community
Intermediate
cometchatcometchat
74

cometchat-native-testing

Codify Jest and React Native Testing Library patterns for CometChat integrations.

Official
Advanced
kid-sidkid-sid
186

security

Provide security guidance for backend APIs and web applications.

Community
Advanced
tDaliletDalile

use-dom

Run web-only React libraries in Expo apps via the use dom directive.

Community
Intermediate