JS Thread vs UI Thread: Ensure heavy calculations do not block the JS thread (causing UI stutter).
Image Optimization: Use expo-image or react-native-fast-image for caching and aggressive memoization.
App Size: Strip unused native modules, compress assets, and use Hermes engine to optimize startup time.
Testing: Implement automated E2E flows with Maestro/Detox and unit tests using React Native Testing Library.
1---2name: react-native3description: React Native / Expo PUDO Checklist4---5# React Native / Expo PUDO Checklist67## 1. PLAN (Architecture & Strategy)8- [ ] **Failure Modes & Store Review:** Identify App Store / Play Store review edge cases, account deletion rules, and blocker policies BEFORE polishing the UI.9- [ ] **Native Build Config:** Establish EAS Build profiles or Bare RN configs early as they are silent killers. Identify constraints with third-party SDKs.10- [ ] **Framework Base:** Decide between Expo Managed Workflow vs. Bare React Native based on native module requirements.11- [ ] **Navigation:** Plan navigation structure using React Navigation or Expo Router (file-based).12- [ ] **Offline & Storage:** Plan offline-first capabilities using AsyncStorage, MMKV, or SQLite.13- [ ] **UI Library:** Select a styling strategy (Tailwind via NativeWind, Tamagui, or StyleSheet).1415## 2. UNDERSTAND (Context & Auditing)16- [ ] **Native Dependencies & Plugins:** Audit `package.json` for libraries requiring auto-linking or custom native code (EAS Plugins). Prioritize diagnosing native dependency crashes.17- [ ] **Platform Differences:** Identify features that require diverging logic between iOS (`.ios.tsx`) and Android (`.android.tsx`).18- [ ] **State Management:** Review global state for performance impacts on re-renders (context vs. atomic state like Jotai).1920## 3. DEVELOP (Implementation)21- [ ] **Layouts & Flexbox:** Build fluid, responsive layouts using React Native Flexbox. Handle Safe Areas (notches, dynamic islands).22- [ ] **Interactivity:** Use `Animated` API or `react-native-reanimated` for 60fps/120fps animations on the UI thread.23- [ ] **Lists:** Replace `ScrollView` with `FlatList` or `FlashList` for rendering large datasets efficiently.24- [ ] **Permissions:** Implement graceful permission requests (Camera, Location, Push Notifications).2526## 4. OPTIMIZE (Performance & Review)27- [ ] **JS Thread vs UI Thread:** Ensure heavy calculations do not block the JS thread (causing UI stutter).28- [ ] **Image Optimization:** Use `expo-image` or `react-native-fast-image` for caching and aggressive memoization.29- [ ] **App Size:** Strip unused native modules, compress assets, and use Hermes engine to optimize startup time.30- [ ] **Testing:** Implement automated E2E flows with Maestro/Detox and unit tests using React Native Testing Library.
Run npx skillmds@latest add dongduong2001/react-native in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
React Native / Expo PUDO Checklist It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
DongDuong2001 (@dongduong2001) published this skill. Their other Agent Skills are listed on their SkillMD profile.
DongDuong2001