React Native Best Practices Architect

Get React Native code from your agent that uses native primitives, typed navigation and fast lists, and audit existing screens for web habits with a bundled script.

The Problem

Coding agents learned React mostly from the web. Ask one for a React Native screen and you can get <div>, <span>, onClick and CSS grid, none of which render on a phone. Even when the primitives are right, the details slip: a FlatList keyed by index, a list nested inside a ScrollView so it renders every row, content under the notch, an auth token saved to unencrypted AsyncStorage, or advice about libraries that are no longer maintained. Each of these looks fine in review and fails on a device.

What You Get

• Rules for writing React Native code: primitives only, Pressable for touch, module-level StyleSheet.create, typed React Navigation 7 param lists, Platform.select for iOS and Android differences, safe areas from react-native-safe-area-context, and keyboard handling for forms.
• List performance guidance that matches current React Native: stable keys, memoized renderItem and rows, window tuning, getItemLayout for fixed rows, when removeClippedSubviews helps and when it blanks rows, and the FlashList v1 vs v2 difference.
• Secure state defaults: Zustand or Redux Toolkit depending on the project, AsyncStorage only for non-sensitive data, tokens in expo-secure-store or react-native-keychain.
• New Architecture notes: codegen specs for native components and TurboModules instead of hand-written bridge code.
• scripts/rn_audit.py, a read-only Python script with no dependencies. It flags DOM elements, react-dom imports, onClick, credentials written to AsyncStorage, index keys, lists inside ScrollViews, inline styles and missing keyboard or safe-area handling, each with file:line and severity. It exits 1 on any HIGH finding, so you can run it in CI.
• An audit checklist for what the script cannot see, a demo file to try it on, typed navigation and state examples, and screen and component templates.

Why This Beats Prompting It Yourself

A prompt like "use React Native best practices" gets you the agent's average memory of blog posts, including outdated ones: mandatory removeClippedSubviews, FastImage for every image, keyboard-aware-scroll-view for forms. This skill pins the rules to how current React Native behaves and tells the agent to detect the project first, so it follows the navigation, state and list libraries you already use. In GENERATE mode the agent runs the audit script on the files it wrote and fixes what it finds before handing them back. In AUDIT mode the script gives a fast, repeatable first pass, and the checklist covers what a regex cannot. The session below is verbatim output of the bundled script on its demo file.

Example Session

You: Audit the demo screen in examples/audit-demo for web habits and list problems, medium severity and up.

Agent: ProductListScreen.tsx:11 HIGH token-in-asyncstorage: credential in AsyncStorage (unencrypted); use expo-secure-store or react-native-keychain ProductListScreen.tsx:15 MEDIUM list-in-scrollview: list inside a ScrollView loses virtualization; use ListHeaderComponent ProductListScreen.tsx:17 HIGH web-element: <div> is a DOM element and will not render; use View, Text, Image, Pressable or TextInput ProductListScreen.tsx:18 HIGH web-element: <span> is a DOM element and will not render; use View, Text, Image, Pressable or TextInput ProductListScreen.tsx:22 MEDIUM index-key: index used as key; use a stable id from the data ProductListScreen.tsx:24 HIGH onclick: onClick is a web prop; use onPress on Pressable ProductListScreen.tsx:24 HIGH web-element: <button> is a DOM element and will not render; use View, Text, Image, Pressable or TextInput 1 file(s), 7 finding(s): 5 high, 2 medium, 0 low

Use Cases

• You want your agent to build a new React Native screen with typed navigation, a fast list and correct safe areas.
• You need to review agent-written React Native code for web elements and props before you merge it.
• Your FlatList stutters or shows blank rows and you want the cause, not a list of every performance prop.
• You want a CI check that fails the build when DOM elements or tokens in AsyncStorage reach the codebase.
• You are handling iOS and Android differences such as shadows, the share sheet, the keyboard and the back button.

Known Limitations

The audit script is line-based pattern matching, not a TypeScript or Babel parser, so confirm each hit and expect it to miss problems spread across files. It cannot run your app; device behavior still needs a simulator or phone. React Native for Web, native Swift, Kotlin or Objective-C code, testing and accessibility are out of scope.

Upgrade to Pro

React Native Best Practices Architect Pro covers the production work this skill leaves out. It adds a three-layer testing setup with Jest and React Native Testing Library, integration tests and Detox end-to-end tests, plus CI with Fastlane, EAS Build and GitHub Actions. It also covers WCAG 2.1 AA accessibility, Hermes and Flipper performance profiling, FCM and APNs push notifications, and offline-first sync with WatermelonDB. https://www.agensi.io/skills/react-native-best-practices-architect-pro