{
  "schemaVersion": "1.0",
  "item": {
    "slug": "react-native",
    "name": "React Native",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/ivangdavila/react-native",
    "canonicalUrl": "https://clawhub.ai/ivangdavila/react-native",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/react-native",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=react-native",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "slug": "react-native",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-07T23:12:11.656Z",
      "expiresAt": "2026-05-14T23:12:11.656Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=react-native",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=react-native",
        "contentDisposition": "attachment; filename=\"react-native-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "react-native"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/react-native"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/react-native",
    "agentPageUrl": "https://openagent3.xyz/skills/react-native/agent",
    "manifestUrl": "https://openagent3.xyz/skills/react-native/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/react-native/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Component Performance",
        "body": "FlatList for any list over 10 items — ScrollView with map loads everything in memory, FlatList virtualizes\nkeyExtractor must return stable unique strings — using index causes bugs on reorder and deletion\nReact.memo prevents re-renders when props unchanged — wrap pure display components\nuseCallback for functions passed to child components — new function reference triggers child re-render\nAvoid inline styles in render — creates new object every render, extract to StyleSheet.create"
      },
      {
        "title": "State Management",
        "body": "useState is fine for component-local state — don't add Redux/Zustand for a toggle\nLift state to lowest common ancestor only — higher causes unnecessary re-renders\nuseMemo for expensive computations — but don't overuse, caching has overhead\nContext re-renders all consumers on any change — split contexts by update frequency\nAvoid storing derived data in state — compute during render from source state"
      },
      {
        "title": "Navigation",
        "body": "React Navigation is the standard — Expo Router for file-based routing in Expo projects\nStack screens stay mounted by default — clean up subscriptions and timers in useEffect cleanup\nPass serializable params only — functions and complex objects break deep linking and state persistence\nuseFocusEffect for screen-specific side effects — runs on focus, not just mount\nnavigation.reset for auth flows — clears back stack, prevents returning to login after sign-in"
      },
      {
        "title": "Styling",
        "body": "StyleSheet.create outside component body — creates styles once, not every render\nFlexbox defaults differ from web — flexDirection: 'column', no display: flex needed\nDimensions in density-independent pixels — don't use pixel values from design tools directly\nPlatform.select for platform-specific styles — cleaner than conditionals in style objects\nNo CSS inheritance — text styles don't cascade, each Text needs explicit styling"
      },
      {
        "title": "Native Modules",
        "body": "Expo modules cover most needs — avoid ejecting for common features like camera, location, notifications\nexpo-dev-client enables native modules without full eject — best of both worlds\nReact Native New Architecture (Fabric, TurboModules) is opt-in — check library compatibility before enabling\nNative crashes don't show in JS debugger — check Xcode/Android Studio logs"
      },
      {
        "title": "Performance Debugging",
        "body": "Hermes engine should be enabled — significantly faster startup and lower memory\nInteractionManager.runAfterInteractions defers heavy work — keeps animations smooth\nuseNativeDriver: true for animations — runs on UI thread, not JS thread\nconsole.log in production kills performance — remove or use __DEV__ guard\nFlipper for debugging — network, layout, performance profiling"
      },
      {
        "title": "Images",
        "body": "Use resizeMode appropriately — cover crops, contain letterboxes, stretch distorts\nPrefetch images for smooth UX: Image.prefetch(url) before displaying\nLocal images need explicit dimensions — remote images can use aspect ratio if one dimension set\nSVGs via react-native-svg — better scaling than PNGs for icons\nCache remote images with react-native-fast-image — default Image has no persistent cache"
      },
      {
        "title": "Common Mistakes",
        "body": "async in useEffect directly — must define async function inside, then call it\nMissing key warnings in lists — always use unique, stable keys\nAssuming web React patterns work — no DOM, no CSS, different event system\nForgetting cleanup in useEffect — subscriptions, timers, listeners leak without cleanup return\nTesting only on one platform — iOS and Android differ in behavior, test both regularly"
      },
      {
        "title": "Platform Differences",
        "body": "Android needs explicit overflow: 'hidden' for border radius clipping — iOS clips by default\nShadows: iOS uses shadow* props, Android uses elevation\nStatusBar behavior differs — test visibility and color on both platforms\nBack button is Android-only — handle with BackHandler or navigation listeners\nPush notifications setup differs significantly — platform-specific configuration required"
      },
      {
        "title": "Build & Release",
        "body": "npx react-native clean for unexplained build failures — clears caches and derived data\niOS: cd ios && pod install after adding native dependencies — often forgotten step\nAndroid: cd android && ./gradlew clean for stubborn build issues\nEAS Build (Expo) simplifies CI/CD — handles signing, versioning, submission\nTest release builds locally before submitting — development and production behavior differ"
      }
    ],
    "body": "React Native Development Rules\nComponent Performance\nFlatList for any list over 10 items — ScrollView with map loads everything in memory, FlatList virtualizes\nkeyExtractor must return stable unique strings — using index causes bugs on reorder and deletion\nReact.memo prevents re-renders when props unchanged — wrap pure display components\nuseCallback for functions passed to child components — new function reference triggers child re-render\nAvoid inline styles in render — creates new object every render, extract to StyleSheet.create\nState Management\nuseState is fine for component-local state — don't add Redux/Zustand for a toggle\nLift state to lowest common ancestor only — higher causes unnecessary re-renders\nuseMemo for expensive computations — but don't overuse, caching has overhead\nContext re-renders all consumers on any change — split contexts by update frequency\nAvoid storing derived data in state — compute during render from source state\nNavigation\nReact Navigation is the standard — Expo Router for file-based routing in Expo projects\nStack screens stay mounted by default — clean up subscriptions and timers in useEffect cleanup\nPass serializable params only — functions and complex objects break deep linking and state persistence\nuseFocusEffect for screen-specific side effects — runs on focus, not just mount\nnavigation.reset for auth flows — clears back stack, prevents returning to login after sign-in\nStyling\nStyleSheet.create outside component body — creates styles once, not every render\nFlexbox defaults differ from web — flexDirection: 'column', no display: flex needed\nDimensions in density-independent pixels — don't use pixel values from design tools directly\nPlatform.select for platform-specific styles — cleaner than conditionals in style objects\nNo CSS inheritance — text styles don't cascade, each Text needs explicit styling\nNative Modules\nExpo modules cover most needs — avoid ejecting for common features like camera, location, notifications\nexpo-dev-client enables native modules without full eject — best of both worlds\nReact Native New Architecture (Fabric, TurboModules) is opt-in — check library compatibility before enabling\nNative crashes don't show in JS debugger — check Xcode/Android Studio logs\nPerformance Debugging\nHermes engine should be enabled — significantly faster startup and lower memory\nInteractionManager.runAfterInteractions defers heavy work — keeps animations smooth\nuseNativeDriver: true for animations — runs on UI thread, not JS thread\nconsole.log in production kills performance — remove or use __DEV__ guard\nFlipper for debugging — network, layout, performance profiling\nImages\nUse resizeMode appropriately — cover crops, contain letterboxes, stretch distorts\nPrefetch images for smooth UX: Image.prefetch(url) before displaying\nLocal images need explicit dimensions — remote images can use aspect ratio if one dimension set\nSVGs via react-native-svg — better scaling than PNGs for icons\nCache remote images with react-native-fast-image — default Image has no persistent cache\nCommon Mistakes\nasync in useEffect directly — must define async function inside, then call it\nMissing key warnings in lists — always use unique, stable keys\nAssuming web React patterns work — no DOM, no CSS, different event system\nForgetting cleanup in useEffect — subscriptions, timers, listeners leak without cleanup return\nTesting only on one platform — iOS and Android differ in behavior, test both regularly\nPlatform Differences\nAndroid needs explicit overflow: 'hidden' for border radius clipping — iOS clips by default\nShadows: iOS uses shadow* props, Android uses elevation\nStatusBar behavior differs — test visibility and color on both platforms\nBack button is Android-only — handle with BackHandler or navigation listeners\nPush notifications setup differs significantly — platform-specific configuration required\nBuild & Release\nnpx react-native clean for unexplained build failures — clears caches and derived data\niOS: cd ios && pod install after adding native dependencies — often forgotten step\nAndroid: cd android && ./gradlew clean for stubborn build issues\nEAS Build (Expo) simplifies CI/CD — handles signing, versioning, submission\nTest release builds locally before submitting — development and production behavior differ"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/ivangdavila/react-native",
    "publisherUrl": "https://clawhub.ai/ivangdavila/react-native",
    "owner": "ivangdavila",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/react-native",
    "downloadUrl": "https://openagent3.xyz/downloads/react-native",
    "agentUrl": "https://openagent3.xyz/skills/react-native/agent",
    "manifestUrl": "https://openagent3.xyz/skills/react-native/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/react-native/agent.md"
  }
}