{
    "format": "skillpro/v1",
    "skill_id": "minimax-ai-skills-skills-react-native-dev-skill-md",
    "name": "react-native-dev",
    "version": "1.0.0",
    "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.",
    "category": [
        "开发编程"
    ],
    "trigger_words": [],
    "tags": [
        "react",
        "data",
        "writing",
        "ai"
    ],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=minimax-ai-skills-skills-react-native-dev-skill-md",
    "exported_at": "2026-09-16T07:34:38+08:00",
    "system_prompt": "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.",
    "model_config": {
        "provider": "deepseek",
        "model": "deepseek-chat",
        "temperature": 0.7,
        "max_tokens": 4096,
        "top_p": 0.9
    },
    "examples": [
        {
            "input": "请用react-native-dev帮我处理问题",
            "output": "好的，我是react-native-dev。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. 我会根据你的需求提供专业帮助。"
        },
        {
            "input": "介绍一下你的能力",
            "output": "我是react-native-dev，专注于开发编程领域。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."
        }
    ],
    "install_guide": {
        "coze": "在 Coze 平台创建 Bot -> 技能配置 -> 导入此 .skill 文件",
        "dify": "在 Dify 平台创建应用 -> 添加知识库 -> 导入此 .skill 配置",
        "claude": "将 system_prompt 字段内容复制到 Claude 自定义指令中",
        "custom": "将此 .skill 文件加载到你的 AI Agent 框架中，解析 system_prompt 和 model_config 即可使用"
    },
    "scripts": {
        "python": "# react-native-dev - Python extension\n# Add custom Python logic here\ndef process(input_data):\n    return input_data\n",
        "javascript": "// react-native-dev - JavaScript extension\n// Add custom JS logic here\nfunction process(inputData) {\n    return inputData;\n}\n"
    },
    "tools": {
        "mcp_servers": [],
        "api_endpoints": []
    },
    "dependencies": {
        "python": [],
        "node": []
    },
    "hooks": {
        "on_load": "echo \"Skill loaded: react-native-dev\"",
        "on_call": "",
        "on_error": "echo \"Skill error: please check logs\""
    }
}