React Native Best Practices Architect Pro

Ship production React Native apps with E2E tests (Detox), WCAG 2.1 AA accessibility, push notifications, and offline-first data — not just components that render.

Free vs Pro

The free architect reviews React Native code for performance and navigation anti-patterns. Pro adds the platform depth: native-module bridge safety audits, Hermes engine optimization patterns, OTA update (CodePush/EAS) risk review, per-screen render profiling, and offline-first data sync patterns for WatermelonDB/SQLite. Free reviews components — Pro reviews the app as a system.

Upgrade Path

Free for component-level review; Pro when bridge stability, OTA safety, or offline sync are on the line.

The Problem

Your React Native app looks great in the simulator — the components render, the navigation works, the state management is solid. Then you try to submit to the App Store and get rejected for missing accessibility labels. Your QA team can't write Detox tests because the codebase has no testID props. Users on subway trains lose all data when they lose connectivity. And when the app crashes in production, you have no performance profiling to diagnose it — just a vague report that "the app is slow."

What You Get

• 3-layer testing strategy — unit tests (Jest + React Native Testing Library with screen.getByText/getByRole patterns), integration tests (with mocked API providers and QueryClient setup), and E2E tests (Detox with iOS simulator and Android emulator configurations)
• WCAG 2.1 AA compliance audit — 30-point checklist covering accessibilityRole, accessibilityLabel, accessibilityHint, focus management for modals, touch target sizes (≥44x44pt), color contrast ratios, and screen reader announcement patterns via AccessibilityInfo.announceForAccessibility
• Full-stack performance profiling — bundle visualizer for dependency bloat detection, Flipper integration with React DevTools + Hermes Profiler plugins, automated performance audit script that checks bundle size (<5MB), Hermes enabled, FlatList optimizations, and image caching
• Push notification architecture — complete FCM/APNs setup with Notifee for Android notification channels, foreground/background message handlers, token refresh listeners, and deep link routing from notification taps to specific screens
• Offline-first architecture — WatermelonDB schema definition, bidirectional sync engine with pull/push handlers, conflict resolution strategies, and an offline request queue that persists to AsyncStorage and processes on reconnection
• Fastlane/EAS Build CI/CD — GitHub Actions workflow for automated builds on both platforms with Detox test execution as a gate

Why This Beats Prompting It Yourself

When you ask an agent to "add tests to my React Native app," it creates component render tests that verify the component mounts without crashing — not that it behaves correctly, handles accessibility, or works offline. This skill covers the 5 hardest production problems that basic component-focused skills ignore: testing strategy, accessibility compliance, performance profiling, push notifications, and offline data. Each section includes runnable code that executes immediately, not abstract guidance.

Example Session

You: My React Native e-commerce app has 3 issues: Detox tests fail on Android, VoiceOver can't navigate the product list, and the app crashes when opened offline.

Agent:

1. Detox fix: Added testID="product-list" to FlatList, updated .detoxrc.js with correct Android APK path and waitFor with 10s timeout for slow emulator boot. Tests now pass on both platforms.
2. a11y fix: Added accessibilityRole="list" to FlatList, accessibilityRole="button" to all Pressable elements, accessibilityLabel with descriptive text to every product card, and AccessibilityInfo.announceForAccessibility("Item added to cart") after add-to-cart. VoiceOver now reads: "Product list, 12 items. Widget, $29.99. Add to cart, button."
3. Offline fix: Implemented WatermelonDB schema for products with sync_status column, added SyncEngine with pull/push handlers, wrapped API calls in RequestQueue with AsyncStorage persistence, and added NetInfo.addEventListener that triggers sync on reconnection.

Use Cases

• Adding E2E tests with Detox to a React Native app that currently has zero test coverage
• Achieving WCAG 2.1 AA compliance for App Store and EU Accessibility Act requirements
• Setting up a CI/CD pipeline that runs Detox tests on every PR for both iOS and Android
• Implementing push notifications with deep link routing for a social or e-commerce app
• Building an offline-first data layer for a productivity or field-service app

Known Limitations

Detox does not support Expo managed workflow — requires bare workflow or development builds. WatermelonDB requires native linking (pod install / Gradle sync), incompatible with Expo Go. Push notification testing requires physical devices (APNs does not work in simulator). WCAG compliance requires manual VoiceOver/TalkBack testing in addition to automated checks.

---

Tags: react-native mobile testing accessibility performance ci-cd offline-first typescript

Version: 1.0.0