# Send React Native to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - 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. ## Suggested prompts ### New install ```text 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. ``` ### Upgrade existing ```text 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. ``` ## Machine-readable fields ```json { "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": { "downloadUrl": "/downloads/react-native", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=react-native", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md" ], "downloadMode": "redirect", "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." ] } }, "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" } } ``` ## Documentation ### Component Performance FlatList for any list over 10 items — ScrollView with map loads everything in memory, FlatList virtualizes keyExtractor must return stable unique strings — using index causes bugs on reorder and deletion React.memo prevents re-renders when props unchanged — wrap pure display components useCallback for functions passed to child components — new function reference triggers child re-render Avoid inline styles in render — creates new object every render, extract to StyleSheet.create ### State Management useState is fine for component-local state — don't add Redux/Zustand for a toggle Lift state to lowest common ancestor only — higher causes unnecessary re-renders useMemo for expensive computations — but don't overuse, caching has overhead Context re-renders all consumers on any change — split contexts by update frequency Avoid storing derived data in state — compute during render from source state ### Navigation React Navigation is the standard — Expo Router for file-based routing in Expo projects Stack screens stay mounted by default — clean up subscriptions and timers in useEffect cleanup Pass serializable params only — functions and complex objects break deep linking and state persistence useFocusEffect for screen-specific side effects — runs on focus, not just mount navigation.reset for auth flows — clears back stack, prevents returning to login after sign-in ### Styling StyleSheet.create outside component body — creates styles once, not every render Flexbox defaults differ from web — flexDirection: 'column', no display: flex needed Dimensions in density-independent pixels — don't use pixel values from design tools directly Platform.select for platform-specific styles — cleaner than conditionals in style objects No CSS inheritance — text styles don't cascade, each Text needs explicit styling ### Native Modules Expo modules cover most needs — avoid ejecting for common features like camera, location, notifications expo-dev-client enables native modules without full eject — best of both worlds React Native New Architecture (Fabric, TurboModules) is opt-in — check library compatibility before enabling Native crashes don't show in JS debugger — check Xcode/Android Studio logs ### Performance Debugging Hermes engine should be enabled — significantly faster startup and lower memory InteractionManager.runAfterInteractions defers heavy work — keeps animations smooth useNativeDriver: true for animations — runs on UI thread, not JS thread console.log in production kills performance — remove or use __DEV__ guard Flipper for debugging — network, layout, performance profiling ### Images Use resizeMode appropriately — cover crops, contain letterboxes, stretch distorts Prefetch images for smooth UX: Image.prefetch(url) before displaying Local images need explicit dimensions — remote images can use aspect ratio if one dimension set SVGs via react-native-svg — better scaling than PNGs for icons Cache remote images with react-native-fast-image — default Image has no persistent cache ### Common Mistakes async in useEffect directly — must define async function inside, then call it Missing key warnings in lists — always use unique, stable keys Assuming web React patterns work — no DOM, no CSS, different event system Forgetting cleanup in useEffect — subscriptions, timers, listeners leak without cleanup return Testing only on one platform — iOS and Android differ in behavior, test both regularly ### Platform Differences Android needs explicit overflow: 'hidden' for border radius clipping — iOS clips by default Shadows: iOS uses shadow* props, Android uses elevation StatusBar behavior differs — test visibility and color on both platforms Back button is Android-only — handle with BackHandler or navigation listeners Push notifications setup differs significantly — platform-specific configuration required ### Build & Release npx react-native clean for unexplained build failures — clears caches and derived data iOS: cd ios && pod install after adding native dependencies — often forgotten step Android: cd android && ./gradlew clean for stubborn build issues EAS Build (Expo) simplifies CI/CD — handles signing, versioning, submission Test release builds locally before submitting — development and production behavior differ ## Trust - Source: tencent - Verification: Indexed source record - Publisher: ivangdavila - Version: 1.0.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-05-07T23:12:11.656Z - Expires at: 2026-05-14T23:12:11.656Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/react-native) - [Send to Agent page](https://openagent3.xyz/skills/react-native/agent) - [JSON manifest](https://openagent3.xyz/skills/react-native/agent.json) - [Markdown brief](https://openagent3.xyz/skills/react-native/agent.md) - [Download page](https://openagent3.xyz/downloads/react-native)