# React Native

> React Native / Expo PUDO Checklist

- Skill: `dongduong2001/react-native` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dongduong2001/react-native`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dongduong2001/react-native/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: DongDuong2001 (https://skillmd.com/u/dongduong2001)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dongduong2001/react-native

---

# React Native / Expo PUDO Checklist

## 1. PLAN (Architecture & Strategy)
- [ ] **Failure Modes & Store Review:** Identify App Store / Play Store review edge cases, account deletion rules, and blocker policies BEFORE polishing the UI.
- [ ] **Native Build Config:** Establish EAS Build profiles or Bare RN configs early as they are silent killers. Identify constraints with third-party SDKs.
- [ ] **Framework Base:** Decide between Expo Managed Workflow vs. Bare React Native based on native module requirements.
- [ ] **Navigation:** Plan navigation structure using React Navigation or Expo Router (file-based).
- [ ] **Offline & Storage:** Plan offline-first capabilities using AsyncStorage, MMKV, or SQLite.
- [ ] **UI Library:** Select a styling strategy (Tailwind via NativeWind, Tamagui, or StyleSheet).

## 2. UNDERSTAND (Context & Auditing)
- [ ] **Native Dependencies & Plugins:** Audit `package.json` for libraries requiring auto-linking or custom native code (EAS Plugins). Prioritize diagnosing native dependency crashes.
- [ ] **Platform Differences:** Identify features that require diverging logic between iOS (`.ios.tsx`) and Android (`.android.tsx`).
- [ ] **State Management:** Review global state for performance impacts on re-renders (context vs. atomic state like Jotai).

## 3. DEVELOP (Implementation)
- [ ] **Layouts & Flexbox:** Build fluid, responsive layouts using React Native Flexbox. Handle Safe Areas (notches, dynamic islands).
- [ ] **Interactivity:** Use `Animated` API or `react-native-reanimated` for 60fps/120fps animations on the UI thread.
- [ ] **Lists:** Replace `ScrollView` with `FlatList` or `FlashList` for rendering large datasets efficiently.
- [ ] **Permissions:** Implement graceful permission requests (Camera, Location, Push Notifications).

## 4. OPTIMIZE (Performance & Review)
- [ ] **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.