{
    "app": {
        "name": "react-native-dev",
        "description": "React Native and Expo development guide covering components, styling, animations, navigation,\nstate management, forms, networking, performance optimization, testing, native capabilities,\nand engineering (project structure, deployment, SDK upgrades, CI/CD).\nUse when: building React Native or Expo apps, implementing animations or native UI, managing\nstate, fetching data, writing tests, optimizing performance, deploying to App Store/Play Store,\nsetting up CI/CD, upgrading Expo SDK, or configuring Tailwind/NativeWind.",
        "mode": "advanced-chat",
        "model_config": {
            "provider": "deepseek",
            "model": "deepseek-chat",
            "parameters": {
                "temperature": 0.7,
                "max_tokens": 4096
            }
        }
    },
    "instructions": "name react-native-dev description React Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and engineering (project structure, deployment, SDK upgrades, CI/CD). Use when: building React Native or Expo apps, implementing animations or native UI, managing state, fetching data, writing tests, optimizing performance, deploying to App Store/Play Store, setting up CI/CD, upgrading Expo SDK, or configuring Tailwind/NativeWind. license MIT metadata {\"version\":\"1.0.0\",\"category\":\"mobile\",\"sources\":[\"expo/skills by Expo (https://github.com/expo/skills) — Native UI, navigation, and animation patterns\",\"Expo documentation (docs.expo.dev)\",\"React Native documentation (reactnative.dev)\",\"EAS (Expo Application Services) documentation\"]} React Native & Expo Development Guide A practical guide for building production-ready React Native and Expo applications. Covers UI, animations, state, testing, performance, and deployment. References Consult these resources as needed: references/navigation.md — Expo Router: Stack, Tabs, NativeTabs ( headerLargeTitle , headerBackButtonDisplayMode ), links, modals, sheets, context menus references/components.md — FlashList patterns, expo-image , safe areas ( contentInsetAdjustmentBehavior ), native controls, blur/glass effects, storage references/styling.md — StyleSheet, NativeWind/Tailwind, platform styles, theming, dark mode references/animations.md — Reanimated 3: entering/exiting, shared values, gestures, scroll-driven references/state-management.md — Zustand (selectors, persist), Jotai (atoms, derived), React Query, Context references/forms.md — React Hook Form + Zod: validation, multi-step, dynamic arrays references/networking.md — fetch wrapper, React Query (optimistic updates), auth tokens, offline, API routes, webhooks references/performance.md — Profiling workflow, FlashList + memo , bundle analysis, TTI, memory leaks, animation perf references/testing.md — Jest, React Native Testing Library, E2E with Maestro references/native-capabilities.md — Camera, location, permissions ( use*Permissions hooks), haptics, notifications, biometrics references/engineering.md — Project layout ( components/ui/ , stores/ , services/ ), path aliases, SDK upgrades, EAS build/submit, CI/CD, DOM components Quick Reference Component Preferences Purpose Use Instead of Lists FlashList ( @shopify/flash-list ) + memo items FlatList (no view recycling) Images expo-image RN <Image> (no cache, no WebP) Press Pressable TouchableOpacity (legacy) Audio expo-audio expo-av (deprecated) Video expo-video expo-av (deprecated) Animations Reanimated 3 RN Animated API (limited) Gestures Gesture Handler PanResponder (legacy) Platform check process.env.EXPO_OS Platform.OS Context React.use() React.useContext() (React 18) Safe area scroll contentInsetAdjustmentBehavior=\"automatic\" <SafeAreaView> SF Symbols expo-image with source=\"sf:name\" expo-symbols Scaling Up Situation Consider Long lists with scroll jank Virtualized list libraries (e.g. FlashList) Want Tailwind-style classes NativeWind v4 High-frequency storage reads Sync-based storage (e.g. MMKV) New project with Expo Expo Router over bare React Navigation State Management State Type Solution Local UI state useState / useReducer Shared app state Zustand or Jotai Server / async data React Query Form state React Hook Form + Zod Performance Priorities Priority Issue Fix CRITICAL Long list jank FlashList + memoized items CRITICAL Large bundle Avoid barrel imports, enable R8 HIGH Too many re-renders Zustand selectors, React Compiler HIGH Slow startup Disable bundle compression, native nav MEDIUM Animation drops Only animate transform / opacity New Project Init # 1. Create project npx create-expo-app@latest my-app --template blank-typescript cd my-app # 2. Install Expo Router + core deps npx expo install expo-router react-native-safe-area-context react-native-screens # 3. (Optional) Common extras npx expo install expo-image react-native-reanimated react-native-gesture-handler Then configure: Set entry point in package.json : \"main\": \"expo-router/entry\" Add scheme in app.json : \"scheme\": \"my-app\" Delete App.tsx and index.ts Create app/_layout.tsx as root Stack layout Create app/(tabs)/_layout.tsx for tab navigation Create route files in app/(tabs)/ (see navigation.md ) For web support, also install: npx expo install react-native-web react-dom @expo/metro-runtime Core Principles Consult references before writing : when implementing navigation, lists, networking, or project setup, read the matching reference file above for patterns and pitfalls. Try Expo Go first ( npx expo start ). Custom builds ( eas build ) only needed when using local Expo modules, Apple targets, or third-party native modules not in Expo Go. Conditional rendering : use {count > 0 && <Text />} not {count && <Text />} (renders \"0\"). Animation rule : only animate transform and opacity — GPU-composited, no layout thrash. Imports : always import directly from source, not barrel files — avoids bundle bloat. Lists and images : before using FlatList or RN Image , check the Component Preferences table above — FlashList and expo-image are almost always the right choice. Route files : always use kebab-case, never co-locate components/types/utils in app/ . Checklist New Project Setup tsconfig.json path aliases configured EXPO_PUBLIC_API_URL env var set per environment Root layout has GestureHandlerRootView (if using gestures) contentInsetAdjustmentBehavior=\"automatic\" on all scroll views FlashList instead of FlatList for lists > 20 items Before Shipping Profile in --profile mode, fix frames > 16ms Bundle analyzed ( source-map-explorer ), no barrel imports R8 enabled for Android Unit + component tests for critical paths E2E flows for login, core feature, checkout Flutter development → see flutter-dev skill. iOS native (UIKit/SwiftUI) → see ios-application-dev skill. Android native (Kotlin/Compose) → see android-native-dev skill. React Native is a trademark of Meta Platforms, Inc. Expo is a trademark of 650 Industries, Inc. All other product names are trademarks of their respective owners.",
    "variables": [],
    "opening_statement": "你好，我是 react-native-dev，React Native and Expo development guide covering c...",
    "suggested_questions": [],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=minimax-ai-skills-skills-react-native-dev-skill-md"
}