Name: React Native Expo
Author: karr83sv2k25-ai

React Native Expo | Skills Pool

# 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

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

# 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!)

# 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

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

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

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

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

import { forwardRef } from 'react';

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

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

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

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

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

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

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

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

# 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

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

# 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)

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

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

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

// 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+
    }
  }
}

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

function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* Content respects system bars */}
    </SafeAreaView>
  );
}

<View style={{ display: 'contents' }}>
  {/* This View disappears, but Text still renders */}
  <Text>I'm still here!</Text>
</View>

// Default: padding/border inside box
<View style={{
  boxSizing: 'border-box',  // Default
  width: 100,
  padding: 10,
  borderWidth: 2
  // Total width: 100 (padding/border inside)
}} />

// Content-box: padding/border outside
<View style={{
  boxSizing: 'content-box',
  width: 100,
  padding: 10,
  borderWidth: 2
  // Total width: 124 (100 + 20 padding + 4 border)
}} />

<View style={{ backgroundColor: 'red' }}>
  <View style={{
    mixBlendMode: 'multiply',  // 16 modes available
    backgroundColor: 'blue'
    // Result: purple (red × blue)
  }} />
</View>

// Prevent unwanted blending:
<View style={{ isolation: 'isolate' }}>
  {/* Blending contained within this view */}
</View>

<View style={{
  outlineWidth: 2,
  outlineStyle: 'solid',      // solid | dashed | dotted
  outlineColor: 'blue',
  outlineOffset: 4,           // Space between element and outline
  outlineSpread: 2            // Expand outline beyond offset
}} />

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

<Image
  source={MyIcon}
  style={{ width: 40, height: 40 }}
/>

// Or with require:
<Image
  source={require('./assets/my_icon.xml')}
  style={{ width: 40, height: 40 }}
/>

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 (
    <form action={submitAction}>
      <TextInput name="email" />
      <Button disabled={isPending}>
        {isPending ? 'Submitting...' : 'Submit'}
      </Button>
      {state.message && <Text>{state.message}</Text>}
    </form>
  );
}

import { useOptimistic } from 'react';

function LikeButton({ postId, initialLikes }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    initialLikes,
    (currentLikes, amount) => currentLikes + amount
  );

  async function handleLike() {
    addOptimisticLike(1);  // Update UI immediately
    await api.like(postId);  // Then update server
  }

  return (
    <Button onPress={handleLike}>
      ❤️ {optimisticLikes}
    </Button>
  );
}

import { use } from 'react';

function UserProfile({ userPromise }) {
  // Read promise directly during render (suspends if pending)
  const user = use(userPromise);

  return <Text>{user.name}</Text>;
}

import * as FileSystem from 'expo-file-system/legacy';
await FileSystem.writeAsStringAsync(uri, content);

import { File } from 'expo-file-system';
const file = new File(uri);
await file.writeString(content);

// OLD: expo-av
import { Audio } from 'expo-av';
const { sound } = await Audio.Sound.createAsync(require('./audio.mp3'));
await sound.playAsync();

// NEW: expo-audio
import { useAudioPlayer } from 'expo-audio';
const player = useAudioPlayer(require('./audio.mp3'));
player.play();

// OLD: expo-av
import { Video } from 'expo-av';
<Video source={require('./video.mp4')} />

// NEW: expo-video
import { VideoView } from 'expo-video';
<VideoView source={require('./video.mp4')} />

# NativeWind does not support Reanimated v4 yet (as of Jan 2026)
# If using NativeWind, must stay on Reanimated v3
npm install react-native-reanimated@^3

Reanimated Version	Architecture Support	Expo SDK
v3	Legacy + New Architecture	SDK 52-54
v4	New Architecture ONLY	SDK 54+

React Native Expo

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

Social Vibing Repository Conventions

React Native Expo

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

Social Vibing Repository Conventions

Quick Start (15 Minutes)

1. Create New Expo Project (RN 0.76+)

2. Verify New Architecture is Enabled

3. Start Development Server

Critical Breaking Changes (Dec 2024+)

🔴 New Architecture Mandatory (0.82+)

🔴 propTypes Removed (React 19 / RN 0.78+)

🔴 forwardRef Deprecated (React 19)

🔴 Swift iOS Template Default (0.77+)

🔴 Metro Log Forwarding Removed (0.77+)

🔴 Chrome Debugger Removed (0.79+)

🔴 JSC Engine Moved to Community (0.79+)

🔴 Deep Imports Deprecated (0.80+)

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

New Features (Post-Dec 2024)

CSS Properties (0.77+ New Architecture Only)

1. display: contents

2. boxSizing

3. mixBlendMode + isolation

4. outline Properties

Android XML Drawables (0.78+)

React 19 New Hooks

1. useActionState (replaces form patterns)

2. useOptimistic (optimistic UI updates)

3. use (read promises/contexts during render)

React Native DevTools (0.76+)

Known Issues Prevention

Issue #1: propTypes Silently Ignored

Issue #2: forwardRef Deprecated Warning

Issue #3: New Architecture Cannot Be Disabled (0.82+)

Issue #4: "Fabric component descriptor not found"

Issue #5: "TurboModule not registered"

Issue #6: Swift AppDelegate Missing RCTAppDependencyProvider

Issue #7: Metro Logs Not Appearing

Issue #8: Chrome Debugger Not Working

Issue #9: Deep Import Errors

Issue #10: Redux Store Crashes with New Architecture

Issue #11: i18n-js Unreliable with New Architecture

Issue #12: CodePush Crashes on Android

Issue #13: expo-file-system Legacy API Removed (SDK 55+)

Issue #14: expo-av Removed (SDK 55+)

Issue #15: Reanimated v4 Requires New Architecture

Issue #16: iOS Crashes on Launch with Hermes + New Architecture (SDK 54) - Community-sourced

Liquid Glass Design

Compose Multiplatform Patterns

Foundation Models On Device

Swiftui Patterns

Foundation Models On Device

Swiftui Patterns

1. `display: contents`

2. `boxSizing`

3. `mixBlendMode` + `isolation`

4. `outline` Properties

1. `useActionState` (replaces form patterns)

2. `useOptimistic` (optimistic UI updates)

3. `use` (read promises/contexts during render)