React Native Expo (0.76-0.82+ / SDK 52+)

Status: Production Ready Last Updated: 2026-01-21 Dependencies: Node.js 20.19.4+, Expo CLI, Xcode 16.1+ (iOS) Latest Versions: [email protected], expo@~54.0.31, [email protected]

---

Quick Start (15 Minutes)

1. Create New Expo Project (RN 0.76+)

# Create new Expo app with React Native 0.76+
npx create-expo-app@latest my-app

cd my-app

# Install latest dependencies
npx expo install react-native@latest expo@latest

Why this matters:

• Expo SDK 52+ uses React Native 0.76+ with New Architecture enabled by default
• New Architecture is mandatory in React Native 0.82+ (cannot be disabled)
• Hermes is the only supported JavaScript engine (JSC removed from Expo Go)

2. Verify New Architecture is Enabled

# Check if New Architecture is enabled (should be true by default)
npx expo config --type introspect | grep newArchEnabled

CRITICAL:

• React Native 0.82+ requires New Architecture - legacy architecture completely removed
• If migrating from 0.75 or earlier, upgrade to 0.76-0.81 first to use the interop layer
• Never try to disable New Architecture in 0.82+ (build will fail)

3. Start Development Server

# Start Expo dev server
npx expo start

# Press 'i' for iOS simulator
# Press 'a' for Android emulator
# Press 'j' to open React Native DevTools (NOT Chrome debugger!)

CRITICAL:

• Old Chrome debugger removed in 0.79 - use React Native DevTools instead
• Metro terminal no longer streams console.log() - use DevTools Console
• Keyboard shortcuts 'a'/'i' work in CLI, not Metro terminal

---

Critical Breaking Changes (Dec 2024+)

🔴 New Architecture Mandatory (0.82+)

SDK Timeline:

• Expo SDK 54 (React Native 0.81): Last release supporting Legacy Architecture
• Expo SDK 55 (React Native 0.83): New Architecture mandatory, Legacy completely removed

What Changed:

• 0.76-0.81 / SDK 52-54: New Architecture default, legacy frozen (no new features)
• 0.82+ / SDK 55+: Legacy Architecture completely removed from codebase

Impact:

# This will FAIL in 0.82+ / SDK 55+:
# gradle.properties (Android)
newArchEnabled=false  # ❌ Ignored, build fails

# iOS
RCT_NEW_ARCH_ENABLED=0  # ❌ Ignored, build fails

Migration Path:

1. Upgrade to 0.76-0.81 / SDK 54 first (if on 0.75 or earlier)
2. Test with New Architecture enabled
3. Fix incompatible dependencies (Redux, i18n, CodePush, Reanimated v3 → v4)
4. Then upgrade to 0.82+ / SDK 55+

Source: Expo SDK 54 Changelog

🔴 propTypes Removed (React 19 / RN 0.78+)

What Changed: React 19 removed propTypes completely. No runtime validation, no warnings - silently ignored.

Before (Old Code):

import PropTypes from 'prop-types';

function MyComponent({ name, age }) {
  return <Text>{name} is {age}</Text>;
}

MyComponent.propTypes = {  // ❌ Silently ignored in React 19
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

After (Use TypeScript):

type MyComponentProps = {
  name: string;
  age?: number;
};

function MyComponent({ name, age }: MyComponentProps) {
  return <Text>{name} is {age}</Text>;
}

Migration:

# Use React 19 codemod to remove propTypes
npx @codemod/react-19 upgrade

🔴 forwardRef Deprecated (React 19)

What Changed: forwardRef no longer needed - pass ref as a regular prop.

Before (Old Code):

import { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {  // ❌ Deprecated
  return <TextInput ref={ref} {...props} />;
});

After (React 19):

function MyInput({ ref, ...props }) {  // ✅ ref is a regular prop
  return <TextInput ref={ref} {...props} />;
}

🔴 Swift iOS Template Default (0.77+)

What Changed: New projects use Swift AppDelegate.swift instead of Objective-C AppDelegate.mm.

Old Structure:

ios/MyApp/
├── main.m              # ❌ Removed
├── AppDelegate.h       # ❌ Removed
└── AppDelegate.mm      # ❌ Removed

New Structure:

// ios/MyApp/AppDelegate.swift ✅
import UIKit
import React

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  func application(_ application: UIApplication, ...) -> Bool {
    // App initialization
    return true
  }
}

Migration (0.76 → 0.77): When upgrading existing projects, you MUST add this line:

// Add to AppDelegate.swift during migration
import React
import ReactCoreModules

RCTAppDependencyProvider.sharedInstance()  // ⚠️ CRITICAL: Must add this!

Source: React Native 0.77 Release Notes

🔴 Metro Log Forwarding Removed (0.77+)

What Changed: Metro terminal no longer streams console.log() output.

Before (0.76):

# console.log() appeared in Metro terminal
$ npx expo start
> LOG  Hello from app!  # ✅ Appeared here

After (0.77+):

# console.log() does NOT appear in Metro terminal
$ npx expo start
# (no logs shown)  # ❌ Removed

# Workaround (temporary, will be removed):
$ npx expo start --client-logs  # Shows logs, deprecated

Solution: Use React Native DevTools Console instead (press 'j' in CLI).

Source: React Native 0.77 Release Notes

🔴 Chrome Debugger Removed (0.79+)

What Changed: Old Chrome debugger (chrome://inspect) removed. Use React Native DevTools instead.

Old Method (Removed):

# ❌ This no longer works:
# Open Dev Menu → "Debug" → Chrome DevTools opens

New Method (0.76+):

# Press 'j' in CLI or Dev Menu → "Open React Native DevTools"
# ✅ Uses Chrome DevTools Protocol (CDP)
# ✅ Reliable breakpoints, watch values, stack inspection
# ✅ JS Console (replaces Metro logs)

Limitations:

• Third-party extensions not yet supported (Redux DevTools, etc.)
• Network inspector coming in 0.83 (late 2025)

Source: React Native 0.79 Release Notes

🔴 JSC Engine Moved to Community (0.79+)

What Changed: JavaScriptCore (JSC) first-party support removed from React Native 0.81+ core. Moved to community package.

Before (0.78):

• Both Hermes and JSC bundled in React Native
• JSC available in Expo Go

After (0.79+ / React Native 0.81+ / SDK 54):

# JSC removed from React Native core
# If you still need JSC (rare):
npm install @react-native-community/javascriptcore

Expo Go:

• SDK 52+: JSC completely removed from Expo Go
• Hermes only supported

Note: JSC will eventually be removed entirely from React Native.

Source: Expo SDK 54 Changelog

🔴 Deep Imports Deprecated (0.80+)

What Changed: Importing from internal paths will break.

Before (Old Code):

// ❌ Deep imports deprecated
import Button from 'react-native/Libraries/Components/Button';
import Platform from 'react-native/Libraries/Utilities/Platform';

After:

// ✅ Import only from 'react-native'
import { Button, Platform } from 'react-native';

Source: React Native 0.80 Release Notes

🔴 Android Edge-to-Edge Mandatory (SDK 54+)

What Changed: Edge-to-edge display is enabled in all Android apps by default in SDK 54 and cannot be disabled.

Impact:

// app.json or app.config.js
{
  "expo": {
    "android": {
      // This setting is now IGNORED - edge-to-edge always enabled
      "edgeToEdgeEnabled": false  // ❌ No effect in SDK 54+
    }
  }
}

UI Impact: Content now extends behind system status bar and navigation bar. You must account for insets manually using react-native-safe-area-context.

Solution:

import { SafeAreaView } from 'react-native-safe-area-context';

function App() {
  return 
how to use react-native-expo
CursorClaude CodeClineCodexWindsurfGooseGitHub CopilotVS CodeGemini CLIKiloOpencodeKimi CLIRoo ClineAiderContinueZedBolt.newLovablev0Replit AgentSweepSmol DeveloperDevinCavemanAmpAntigravity
How to use react-native-expo on Cursor
AI-first code editor with Composer
1
Prerequisites
Before installing skills in Cursor, ensure your development environment meets these requirements:
›Cursor installed and configured on your development machine
›Node.js version 16.0+ with npm package manager (verify with node --version)
›Active project directory or workspace where you want to add react-native-expo
2
Execute installation command
Execute the skills CLI command in your project's root directory to begin installation:
$npx skills add https://github.com/jezweb/claude-skills --skill react-native-expocopy
The skills CLI fetches react-native-expo from GitHub repository jezweb/claude-skills and configures it for Cursor.
3
Select Cursor when prompted
The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ── always included ────
│   • Amp
│   • Antigravity
│   • Cline
│   • Codex
│ ●Cursor(selected)
│   • Cursor
│   • Windsurf
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/react-native-expo
Reload or restart Cursor to activate react-native-expo. Access the skill through slash commands (e.g., /react-native-expo) or your agent's skill management interface.
⚠
Security & Verification Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.
Additional Resources
›View source code on GitHub›Skills CLI documentation›Learn more about Cursor›What are agent skills?