React Native Best Practices Architect

The Problem

You ask your AI agent to build a React Native screen and it gives you <div>, <span>, <img>, onClick, and CSS display: grid. None of these render on mobile. The agent learned web React and applies it to mobile without understanding the bridge, the renderer, or the fact that <View> cannot contain raw strings. FlatList has no optimization props and scrolls at 15fps on a real device. Safe areas are ignored and content renders under the notch. You spend more time fixing the agent's output than writing the code yourself.

What You Get

• Enforce React Native primitives — every visual element comes from react-native (<View>, <Text>, <Image>, <Pressable>), never from react-dom or HTML, with the View-Text Rule that all text must be wrapped in <Text>
• Mandate StyleSheet.create() — all styles defined via StyleSheet, never inline style objects that bypass React Native's bridge serialization optimization and cause measurable frame drops on scroll
• Apply FlatList performance defaults — every FlatList includes removeClippedSubviews, maxToRenderPerBatch, windowSize, and initialNumToRender, with useCallback-wrapped renderItem and stable unique keys (never index)
• Branch platform-specific code correctly — Platform.OS for imperative logic, Platform.select() for declarative styles, and .ios.tsx/.android.tsx file extensions for Metro bundler auto-resolution
• Build type-safe navigation — React Navigation v7 with typed RootStackParamList, NativeStackScreenProps, navigation.replace() for post-login redirects, and BackHandler integration for Android back button
• Handle New Architecture (Fabric/TurboModules) — codegenNativeComponent instead of requireNativeComponent, JSI-based native modules with typed specs, and migration patterns for RN 0.76+

Why This Beats Prompting It Yourself

Agents produce web React by default because that's what dominates their training data. Without explicit constraints, they generate <div> in React Native, skip StyleSheet.create(), use index as keyExtractor, and ignore safe areas. This skill encodes React Native's unique runtime constraints — the bridge architecture, platform differences, performance model, and navigation patterns — so the agent produces code that compiles and renders correctly on both iOS and Android.

Example Session

You: "Build a product list screen with pull-to-refresh and infinite scroll"

Agent:

// Agent produces this output with all optimizations applied:
import React, { useCallback, useState } from 'react';
import { View, FlatList, ActivityIndicator, StyleSheet,
         RefreshControl } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';

export function ProductListScreen({ navigation }: Props) {
  const insets = useSafeAreaInsets();
  const renderItem = useCallback(({ item }) => (
    <ProductCard product={item}
      onPress={() => navigation.navigate('ProductDetail',
        { productId: item.id })} />
  ), [navigation]);

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <FlatList
        data={products}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        removeClippedSubviews
        maxToRenderPerBatch={10}
        windowSize={5}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        } />
    </View>
  );
}
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
});

Use Cases

• Building new React Native screens, components, or features from scratch with correct patterns
• Adding React Navigation with typed param lists and proper back-button handling
• Optimizing slow FlatList/SectionList performance in existing apps
• Migrating from the old bridge architecture to Fabric/TurboModules (RN 0.76+)
• Implementing platform-specific behavior (iOS shadow vs Android elevation, Share API differences)
• Reviewing agent-generated React Native code for web-pattern anti-patterns before commit

Known Limitations

This skill targets iOS and Android only — React Native for Web is a separate concern and should not use these patterns. FlashList (@shopify/flash-list) recommendations are included but require installing the Shopify package. Native module development (Objective-C/Swift/Kotlin) is outside scope — only JavaScript-side patterns are covered. New Architecture patterns require RN 0.76+ with the feature flag enabled.

Upgrade to Pro

Free reviews components. React Native Best Practices Architect Pro ($5) reviews the system: native-module bridge safety, Hermes optimization, OTA update risks, and offline-first sync patterns. Upgrade when bridge stability matters — Pro version.