# Modbender Skill Library MCP React Native > --- - Skill: `tomevault-io/modbender-skill-library-mcp-react-native` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/modbender-skill-library-mcp-react-native` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/modbender-skill-library-mcp-react-native/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/modbender-skill-library-mcp-react-native --- --- name: React Native description: Build performant cross-platform mobile apps with React Native components, navigation, and native modules. metadata: {"clawdbot":{"emoji":"📱","requires":{"anyBins":["npx","expo"]},"os":["linux","darwin","win32"]}} --- # React Native Development Rules ## 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 --- > Source: [modbender/skill-library-mcp](https://github.com/modbender/skill-library-mcp) — distributed by [TomeVault](https://tomevault.io).