Skill: React Native Pro (Standard 2026)

use

Actions

🎯 Primary Objectives

1. Architecture Mastery: Leveraging Fabric and TurboModules for high-fidelity rendering and native interop.
2. React 19 Hooks: Utilizing

   useActionState

   ,

   useOptimistic

   , and

   use

   to simplify complex data and UI flows.
3. Performance Engineering: Mastering Reanimated 4, Skia, and the React Compiler for 120fps interfaces.
4. Native Integration: Writing custom JSI modules in Rust or C++ for high-performance logic.

🏗️ The 2026 Mobile Toolbelt

1. Core Framework

• React Native 0.78+: Requiring the New Architecture by default.
• React 19: Native support for Actions and concurrent rendering.
• Hermes Engine: Optimized for fast TTI and low memory footprint.

2. High-Performance Libraries

• Reanimated 4: Worklet-based animations with zero main-thread blocking.
• Shopify Skia: For complex 2D graphics and shaders.
• React Navigation 7+: Fully typed, performance-optimized routing.

🛠️ Implementation Patterns

1. React 19 Actions in Mobile

import { useActionState } from 'react';

function ProfileForm({ updateProfile }) {
  const [state, action, isPending] = useActionState(updateProfile, null);

  return (
    <View>
      <TextInput name="username" editable={!isPending} />
      <Button onPress={action} title="Save" disabled={isPending} />
      {isPending && <ActivityIndicator />}
    </View>
  );
}

2. Optimized List Rendering (FlashList)

FlatList

FlashList

import { FlashList } from "@shopify/flash-list";

<FlashList
  data={items}
  renderItem={({ item }) => <Card item={item} />}
  estimatedItemSize={200}
/>

3. Native Drawables (Android XML)

🚫 The "Do Not List" (Anti-Patterns)

1. NEVER use the "Bridge" for high-frequency data (e.g., scroll events). Use JSI or TurboModules.
2. NEVER perform heavy calculations on the JS main thread. Move to a Worklet or Web Worker.
3. NEVER use

   forwardRef

   . Use React 19's direct

   ref

   as props.
4. NEVER ignore "Cumulative Layout Shift" in mobile. Use

   estimatedItemSize

   for lists.

🛠️ Troubleshooting & Debugging

useAnimatedStyle

EventEmitter.remove()

Lazy

node_modules

inspector

gap

📚 Reference Library

• New Architecture: Fabric & TurboModules deep dive.
• Performance & Reanimated 4: High-speed UX.
• Cross-Platform UX: Designing for iOS and Android.

📊 Quality Metrics

• Frame Rate: Constant 60/120 fps for all transitions.
• App Size: < 15MB for base Squaads mobile apps.
• TTI (Time to Interactive): < 1.5s on mid-range devices.

🔄 Evolution from 0.70 to 0.78

• 0.72: New Architecture improvements, stable Symlinks.
• 0.74: Yoga 3.0, Bridgeless by default (internal).
• 0.76: Fabric and TurboModules enabled by default.
• 0.78: React 19 integration, Android XML Drawables.