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: react-native@0.81.5, expo@~54.0.31, react@19.2.3

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:

Upgrade to 0.76-0.81 / SDK 54 first (if on 0.75 or earlier) Test with New Architecture enabled Fix incompatible dependencies (Redux, i18n, CodePush, Reanimated v3 → v4) 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 {name} is {age}; }

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 {name} is {age}; }

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 ; });

After (React 19):

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

🔴 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 ( {/ Content respects system bars /} ); }

Source: Expo SDK 54 Changelog

New Features (Post-Dec 2024) CSS Properties (0.77+ New Architecture Only)

React Native now supports many CSS properties previously only available on web:

1. display: contents

Makes an element "invisible" but keeps its children in the layout:

{/ This View disappears, but Text still renders /} I'm still here!

Use case: Wrapper components that shouldn't affect layout.

1. boxSizing

Control how width/height are calculated:

// Default: padding/border inside box

// Content-box: padding/border outside

1. mixBlendMode + isolation

Blend layers like Photoshop:

// Prevent unwanted blending: {/ Blending contained within this view /}

Available modes: multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity

1. outline Properties

Visual outline that doesn't affect layout (unlike border):

Key difference: Outline doesn't change element size or trigger layout recalculations.

Source: React Native 0.77 Release Notes

Android XML Drawables (0.78+)

Use native Android vector drawables (XML) as Image sources:

// Load XML drawable at build time import MyIcon from './assets/my_icon.xml';

// Or with require:

Benefits:

Scalable vector graphics (resolution-independent) Smaller APK size vs PNG Off-thread decoding (better performance)

Constraints:

Build-time resources only (no network loading) Android only (iOS still uses SF Symbols or PNG)

Source: React Native 0.78 Release Notes

React 19 New Hooks 1. useActionState (replaces form patterns) import { useActionState } from 'react';

function MyForm() { const [state, submitAction, isPending] = useActionState( async (prevState, formData) => { // Async form submission const result = await api.submit(formData); return result; }, { message: '' } // Initial state );

return (