skills.rest
Yash-Awasthi
Yash-AwasthiCOMMUNITY
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 Aug 28, 2026
Search Tags:#state management#zod#react native#tanstack query#expo#expo router#mobile patterns
One-click install
npx skills add https://github.com/Yash-Awasthi/adapfit --skill react-native-patterns-yash-awasthi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-patterns
Source: https://github.com/Yash-Awasthi/adapfit/tree/main/.agents/skills/react-native-patterns
Command: npx skills add https://github.com/Yash-Awasthi/adapfit --skill react-native-patterns-yash-awasthi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React Native and Expo developers often misapply web/React-DOM patterns (URL-as-state, fetch-in-useEffect, ScrollView with mapped arrays) that cause stale data, janky lists, and insecure token storage on mobile. This Skill provides concrete, production-oriented patterns for building screens, navigation, data layers, and native API integrations correctly. ## Core Features & Use Cases - Navigation & Routing: File-based Expo Router structure with Zod-validated dynamic route params and thin route files delegating to screen components. - State & Data Fetching: Clear separation of server state (TanStack Query), client state (Zustand/Jotai), route params, and form state (React Hook Form + Zod), with response validation at the API boundary. - Performance & Native APIs: Virtualized lists with FlatList/FlashList, memoized renderItem, StyleSheet or NativeWind styling, hooks wrapping native APIs like Location, and secure token storage via expo-secure-store. - Use Case: When building a new orders screen in an Expo app, use this Skill to wire the route, validate params, fetch data with TanStack Query, render a virtualized list with loading/error/empty states, and store auth tokens securely. ## Quick Start Use the react-native-patterns skill to build an Expo Router screen that fetches and displays a validated list of orders with proper 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 validates the API response with Zod before returning it. For mutations, use useMutation and invalidate the relevant query keys on success to keep server state fresh.

How to validate dynamic 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 instead of passing raw values to your screen.

Zustand vs TanStack Query for React Native state management?▼

They solve different problems: TanStack Query owns server state (remote data caching and refetching), while Zustand holds client/UI state. Copying server data into a Zustand store creates two sources of truth and stale data.

Does FlatList work better than ScrollView for long lists?▼

Yes, FlatList virtualizes rows and only renders visible items, while mapping a large array inside ScrollView renders everything at once, causing jank and high memory use. 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.

When should I not use these React Native patterns?▼

Do not apply them to web/React-DOM projects, since they assume the managed Expo workflow with no browser DOM, no URL bar, and no web data-fetching defaults. For web apps, use React/Next.js patterns instead.

Related Skills

Explore More Software Engineering Skills→
SajinthanSajinthan

screen

Generate Expo Router screens, route groups, and layouts for React Native apps.

Community
Advanced
cometchatcometchat
74

cometchat-native-testing

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

Official
Advanced
robotijnrobotijn
3

react-native-bridge-checker

Validate React Native native module compatibility and bridge efficiency.

Community
Advanced
tDaliletDalile

use-dom

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

Community
Intermediate