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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: DongDuong2001
• Source: DongDuong2001/pudo-code-system
• License: MIT
• Homepage: https://dongduong2001.github.io/pudo-code-system/

Install and usage instructions live in the source repository linked above.