Advanced

// TypeScript spec (NitroSpecs/HybridMath.nitro.ts)
import { HybridObject } from "react-native-nitro-modules";
// => HybridObject: base type for Nitro Module specifications
 
export interface HybridMath extends HybridObject<{ ios: "swift"; android: "kotlin" }> {
  // => HybridObject<{ ios: 'swift'; android: 'kotlin' }>:
  // => tells Nitro to generate Swift bindings for iOS, Kotlin for Android
  add(a: number, b: number): number;
  // => synchronous: Nitro Modules can be synchronous (unlike async TurboModules)
  fibonacci(n: number): number;
  // => complex computation: runs on native thread without serialization
}

// ios/HybridMath.swift
import Foundation
import NitroModules
 
class HybridMath: HybridMathSpec {
  // => HybridMathSpec: generated by Nitro Codegen from TypeScript spec
  var hybridContext = margelo.nitro.HybridContext()
  // => hybridContext: required boilerplate for Nitro lifecycle management
 
  func add(a: Double, b: Double) -> Double {
    // => a, b: TypeScript number → Swift Double (automatic type mapping)
    return a + b                           // => synchronous return: no async/promise
  }
 
  func fibonacci(n: Double) -> Double {
    // => Fibonacci: CPU-intensive, benefits from native execution
    guard n > 1 else { return n }
    var a: Double = 0, b: Double = 1
    for _ in 2...Int(n) { (a, b) = (b, a + b) }
    return b
  }
}

// JavaScript usage (after Nitro Codegen runs at build time)
import { NitroModules } from "react-native-nitro-modules";
 
const math = NitroModules.createHybridObject<HybridMath>("HybridMath");
// => createHybridObject: creates JS proxy backed by native Nitro object
// => direct C++ memory reference — zero-copy, zero-serialization
 
const sum = math.add(3, 4); // => 7 (synchronous!)
const fib = math.fibonacci(40); // => 102334155 (synchronous!)
// => Without Nitro: fibonacci(40) in JS takes ~1500ms
// => With Nitro (native): fibonacci(40) takes ~1ms
console.log(`3 + 4 = ${sum}, fib(40) = ${fib}`);

// Native module TypeScript spec (NativeCalcModule.ts)
import type { TurboModule } from "react-native";
import { TurboModuleRegistry } from "react-native";
 
export interface Spec extends TurboModule {
  // => Spec: extends TurboModule (required by Codegen)
  multiply(a: number, b: number): Promise<number>;
  // => Promise<number>: TurboModules are typically async (unlike Nitro)
  getDeviceInfo(): Promise<{
    // => returning object: Codegen generates native struct types
    model: string;
    systemVersion: string;
    totalMemory: number;
  }>;
}
 
export default TurboModuleRegistry.getEnforcing<Spec>("NativeCalcModule");
// => getEnforcing: throws if module not found (vs get() returns null)
// => 'NativeCalcModule': must match the name registered in native code

// Usage in React Native component
import CalcModule from "./NativeCalcModule";
 
async function performCalculations() {
  const result = await CalcModule.multiply(6, 7);
  // => await: TurboModules are async by default
  // => result: 42 (native multiplication, returned as Promise)
 
  const info = await CalcModule.getDeviceInfo();
  // => info: { model: 'iPhone 16 Pro', systemVersion: '18.4', totalMemory: 8192 }
  console.log(`${info.model} on iOS ${info.systemVersion}, ${info.totalMemory}MB RAM`);
}

// Component TypeScript spec (NitroSpecs/HybridMapView.nitro.ts)
import type { ViewProps } from "react-native";
import { HybridObject } from "react-native-nitro-modules";
 
// => ViewSpec: for native view components (not just modules)
export interface HybridMapViewProps extends ViewProps {
  // => extends ViewProps: inherits standard View props (style, testID, etc.)
  latitude: number;
  longitude: number;
  zoom?: number; // => optional prop with ?
  onRegionChange?: (event: {
    // => event callback prop
    latitude: number;
    longitude: number;
  }) => void;
}

// ios/HybridMapView.swift
import UIKit
import NitroModules
import MapKit
 
@objc class HybridMapView: UIView, HybridMapViewSpec {
  // => HybridMapViewSpec: generated from TypeScript spec
  // => UIView subclass: all Fabric custom views extend UIView on iOS
 
  private var mapView: MKMapView!
  // => MKMapView: iOS native MapKit view component
 
  @objc var latitude: Double = 0 { didSet { updateRegion() } }
  // => @objc required for Fabric property observation
  // => didSet: synchronous update when JS changes the prop
  @objc var longitude: Double = 0 { didSet { updateRegion() } }
  @objc var zoom: Double = 10 { didSet { updateRegion() } }
  @objc var onRegionChange: RCTDirectEventBlock?
  // => RCTDirectEventBlock: type for JS callback events from native view
 
  override init(frame: CGRect) {
    super.init(frame: frame)
    mapView = MKMapView(frame: bounds)
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    addSubview(mapView)
    // => embed native MapKit view as child of this custom Fabric view
  }
 
  private func updateRegion() {
    let region = MKCoordinateRegion(
      center: CLLocationCoordinate2D(latitude: latitude, longitude: longitude),
      latitudinalMeters: 1000 * (20 - zoom),
      longitudinalMeters: 1000 * (20 - zoom)
    )
    mapView.setRegion(region, animated: true)
  }
}

// Usage in React Native
import { HybridMapView } from 'your-map-nitro-module';
 
function MapScreen() {
  return (
    <HybridMapView
      style={{ flex: 1 }}
      latitude={-6.2146}                       // => Jakarta latitude
      longitude={106.8451}                      // => Jakarta longitude
      zoom={12}
      onRegionChange={(event) => {
        console.log('Map moved to:', event.latitude, event.longitude);
      }}
    />
  );
}

import { Camera, useCameraDevice, useCameraFormat } from 'react-native-vision-camera';
// => react-native-vision-camera 5.0.4: Nitro Module rewrite
// => BREAKING: V5 Constraints API replaces V4 Formats API entirely
 
export default function VisionCameraDemo() {
  const device = useCameraDevice('back');
  // => useCameraDevice: selects the physical camera device
  // => 'back' | 'front' | 'external'
  // => device: CameraDevice | undefined (undefined while loading or no camera)
 
  const format = useCameraFormat(device, [
    // => useCameraFormat: Constraints API (V5) — replaces V4's manual format selection
    // => V4: you selected format from device.formats array manually
    // => V5: you declare constraints, library selects best matching format
    { videoAspectRatio: 16 / 9 },          // => constraint: prefer 16:9 video
    { videoResolution: { width: 1920, height: 1080 } },  // => prefer 1080p
    // => constraints evaluated in priority order (first = highest priority)
    { fps: 60 },                            // => prefer 60fps
    { photoHdr: true },                     // => prefer HDR photos
    { videoStabilizationMode: 'cinematic-extended' },  // => prefer best stabilization
    // => if device doesn't support 60fps HDR at 1080p,
    // => library finds next-best format matching the most constraints
  ]);
  // => format: CameraFormat | undefined — the resolved native format
 
  if (!device || !format) {
    return null;  // => device/format not yet available
  }
 
  return (
    <Camera
      style={{ flex: 1 }}
      device={device}
      isActive={true}            // => isActive: starts camera preview when true
      format={format}            // => apply resolved format
      photo={true}               // => enable photo output
      video={false}              // => disable video output (saves memory)
      audio={false}              // => no audio
      enableHighQualityPhotos={true}
      // => enableHighQualityPhotos: uses highest resolution photo capture pipeline
    />
  );
}
 
// => V4 vs V5 migration example:
// V4 (OLD — do NOT use in V5):
// const formats = device.formats;
// const format = formats.sort((a, b) => b.videoWidth - a.videoWidth)[0];
// => Manual format selection: fragile, device-specific
 
// V5 (NEW — use this):
// const format = useCameraFormat(device, [{ videoResolution: 'max' }]);
// => Declarative constraints: library handles format selection across all devices

import { Camera, useCameraDevice, useFrameProcessor } from 'react-native-vision-camera';
import { useSharedValue } from 'react-native-reanimated';
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
export default function FrameProcessorDemo() {
  const device = useCameraDevice('back');
  const detectedColor = useSharedValue<string>('#000');
  // => sharedValue: shared between frame processor (UI thread) and animated styles
 
  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    // => 'worklet' directive: this function runs on the Camera frame thread
    // => frame: Frame object — contains raw pixel data
 
    const width = frame.width;     // => frame pixel width (e.g. 1920)
    const height = frame.height;   // => frame pixel height (e.g. 1080)
 
    // => Sample center pixel color (demonstration)
    // => In production: use a native frame processor plugin for heavy operations
    // => e.g. @mrousavy/vision-camera-resize-plugin for resizing before ML inference
    const centerX = Math.floor(width / 2);
    const centerY = Math.floor(height / 2);
 
    // => frame.toArrayBuffer(): converts frame to raw pixel buffer
    // => Used with ML models (TFLite, Core ML) for inference
    // => 2GB/s JSI throughput: fast enough for 4K frame analysis
 
    // => Communicate result back to Reanimated shared value
    detectedColor.value = '#0173B2';  // => update shared value from worklet
    // => This triggers useAnimatedStyle update on UI thread (no React re-render)
  }, []);
  // => useFrameProcessor: creates a worklet that runs on every camera frame
  // => dependency array: re-creates worklet if deps change
 
  const overlayStyle = useAnimatedStyle(() => ({
    borderColor: detectedColor.value,
    // => border color changes when frame processor detects color
  }));
 
  if (!device) return null;
 
  return (
    <Camera
      style={{ flex: 1 }}
      device={device}
      isActive={true}
      frameProcessor={frameProcessor}   // => attach frame processor to camera
      // => Every frame (16-33ms at 30-60fps) triggers frameProcessor worklet
      pixelFormat="yuv"
      // => pixelFormat: 'yuv' (YCbCr, most efficient) | 'rgb' | 'native'
      // => 'yuv' preferred: native camera format, no color space conversion cost
    />
  );
}

import { Canvas, Path, Paint, Circle, Group, LinearGradient, vec } from '@shopify/react-native-skia';
// => @shopify/react-native-skia 2.6.2: GPU-accelerated graphics on New Architecture
import { View, StyleSheet } from 'react-native';
 
export default function SkiaDemo() {
  const width = 300;
  const height = 200;
 
  return (
    <View style={styles.container}>
      <Canvas style={{ width, height }}>
        {/* => Canvas: Skia rendering context — all drawing inside */}
 
        {/* => Group: transform group (translate, rotate, scale) */}
        <Group>
          {/* => Circle: filled/stroked circle */}
          <Circle cx={60} cy={60} r={40}>
            <Paint color="#0173B2" />
            {/* => Paint: fill color */}
          </Circle>
 
          {/* => Circle with stroke only */}
          <Circle cx={60} cy={60} r={40}>
            <Paint color="#DE8F05" style="stroke" strokeWidth={3} />
            {/* => style: 'fill' (default) | 'stroke' */}
          </Circle>
        </Group>
 
        {/* => Path: arbitrary vector paths (SVG-like) */}
        <Path
          path="M 150 20 L 200 80 L 100 80 Z"
          // => SVG path: MoveTo, LineTo, LineTo, ClosePath = triangle
        >
          <LinearGradient
            start={vec(100, 20)}            // => gradient start point
            end={vec(200, 80)}              // => gradient end point
            colors={['#029E73', '#CC78BC']} // => accessible palette colors
            // => gradient fills the path
          />
        </Path>
 
        {/* => Complex path: arc + quadratic Bezier */}
        <Path
          path={`M 50 150 Q 150 100 250 150`}
          // => Q: quadratic Bezier curve (control point 150,100)
        >
          <Paint color="#CA9161" style="stroke" strokeWidth={4} strokeCap="round" />
          {/* => strokeCap: 'butt' | 'round' | 'square' */}
        </Path>
 
      </Canvas>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
});

import { Canvas, Circle, useDerivedValue } from '@shopify/react-native-skia';
import { useSharedValue, withRepeat, withTiming, withSequence } from 'react-native-reanimated';
import { View, StyleSheet } from 'react-native';
import { useEffect } from 'react';
 
export default function SkiaAnimatedDemo() {
  const progress = useSharedValue(0);
  // => Reanimated shared value: lives on UI thread
 
  useEffect(() => {
    progress.value = withRepeat(
      withSequence(
        withTiming(1, { duration: 1200 }),  // => expand over 1.2s
        withTiming(0, { duration: 1200 }),  // => collapse over 1.2s
      ),
      -1,                                    // => -1 = repeat indefinitely
      false                                  // => false = don't reverse (sequence handles it)
    );
  }, []);
 
  const radius = useDerivedValue(() => {
    // => useDerivedValue: Skia-specific hook, creates derived value from shared values
    // => runs on UI thread: no JS involvement per frame
    return 20 + progress.value * 60;
    // => radius: 20 when progress=0, 80 when progress=1
  }, [progress]);
  // => radius: Skia-compatible derived value (not a plain number)
 
  const opacity = useDerivedValue(() => {
    return 0.3 + progress.value * 0.7;
    // => opacity: 0.3 → 1.0 as progress goes 0 → 1
  }, [progress]);
 
  return (
    <View style={styles.container}>
      <Canvas style={{ width: 200, height: 200 }}>
        <Circle
          cx={100}
          cy={100}
          r={radius}          // => r: derived value (not number) — animated by UI thread
          opacity={opacity}   // => opacity: derived value, also animated
          color="#0173B2"
        />
        {/* => Circle animates continuously without any React re-renders */}
        {/* => Reanimated shared value → Skia derived value → GPU draw call */}
      </Canvas>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f9f9f9' },
});

import Animated, {
  useSharedTransitionStyle,
  SharedTransition,
} from 'react-native-reanimated';
// => useSharedTransitionStyle: marks view as shared element participant
// => SharedTransition: configures transition behavior
import { router } from 'expo-router';
import { Pressable, View, Text, StyleSheet } from 'react-native';
import { Image } from 'expo-image';
 
const PRODUCTS = [
  { id: '1', name: 'Laptop Pro', price: 1299, image: 'https://picsum.photos/200/200?random=1' },
  { id: '2', name: 'Wireless Earbuds', price: 199, image: 'https://picsum.photos/200/200?random=2' },
];
 
// => Product list screen
export function ProductListScreen() {
  return (
    <View style={styles.list}>
      {PRODUCTS.map(product => (
        <Pressable
          key={product.id}
          onPress={() => router.push({ pathname: '/product/[id]', params: { id: product.id } })}
        >
          <Animated.View sharedTransitionTag={`product-card-${product.id}`}>
            {/* => sharedTransitionTag: unique string linking source + destination */}
            {/* => must match the tag in the detail screen */}
            <Image source={product.image} style={styles.thumbnail} contentFit="cover" />
          </Animated.View>
          <Text style={styles.productName}>{product.name}</Text>
        </Pressable>
      ))}
    </View>
  );
}
 
// => Product detail screen (app/product/[id].tsx)
export function ProductDetailScreen() {
  const { id } = { id: '1' };  // => from useLocalSearchParams in real code
  const product = PRODUCTS.find(p => p.id === id)!;
 
  return (
    <View style={styles.detail}>
      <Animated.View
        sharedTransitionTag={`product-card-${product.id}`}
        // => SAME tag as list screen: Reanimated interpolates between the two positions
        sharedTransitionStyle={SharedTransition.custom((values) => {
          'worklet';
          return {
            width: withTiming(values.targetWidth, { duration: 400 }),
            height: withTiming(values.targetHeight, { duration: 400 }),
            // => custom: control individual properties of the transition
          };
        })}
      >
        <Image source={product.image} style={styles.heroImage} contentFit="cover" />
      </Animated.View>
      <Text style={styles.detailName}>{product.name}</Text>
      <Text style={styles.detailPrice}>${product.price}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  list: { flex: 1, padding: 16, gap: 12 },
  thumbnail: { width: '100%', height: 120, borderRadius: 8 },
  productName: { fontSize: 14, fontWeight: '600', marginTop: 6 },
  detail: { flex: 1, gap: 16 },
  heroImage: { width: '100%', height: 300 },
  detailName: { fontSize: 22, fontWeight: '700', paddingHorizontal: 16 },
  detailPrice: { fontSize: 18, color: '#029E73', paddingHorizontal: 16 },
});
 
function withTiming(v: number, options: any) { return v; }  // => placeholder for demo

import Animated, {
  FadeIn,
  FadeOut,
  SlideInRight,
  SlideOutLeft,
  Layout,
  ZoomIn,
  BounceIn,
  LinearTransition,
} from 'react-native-reanimated';
import { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
 
export default function LayoutAnimationDemo() {
  const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);
  const [showBanner, setShowBanner] = useState(false);
 
  const addItem = () => {
    const fruits = ['Date', 'Elderberry', 'Fig', 'Grape'];
    const newFruit = fruits[Math.floor(Math.random() * fruits.length)];
    setItems(prev => [...prev, newFruit]);
    // => Adding item triggers 'entering' animation on new item
    // => Other items trigger 'layout' animation to shift positions
  };
 
  const removeItem = (index: number) => {
    setItems(prev => prev.filter((_, i) => i !== index));
    // => Removing item triggers 'exiting' animation on removed item
    // => Remaining items trigger 'layout' animation to fill the gap
  };
 
  return (
    <View style={styles.container}>
      {showBanner && (
        <Animated.View
          entering={SlideInRight.duration(300)}    // => slides in from right when mounted
          exiting={SlideOutLeft.duration(300)}     // => slides out to left when unmounted
          style={styles.banner}
        >
          <Text style={styles.bannerText}>New Feature Available!</Text>
        </Animated.View>
      )}
 
      <View style={styles.list}>
        {items.map((item, index) => (
          <Animated.View
            key={item}
            entering={FadeIn.duration(300).delay(index * 50)}
            // => entering: FadeIn when component mounts to React tree
            // => delay(index * 50): stagger each item by 50ms
            exiting={FadeOut.duration(200)}
            // => exiting: FadeOut when component unmounts from React tree
            layout={LinearTransition.duration(250)}
            // => layout: LinearTransition when sibling items shift position
            // => fired when OTHER items are added/removed
            style={styles.item}
          >
            <Text style={styles.itemText}>{item}</Text>
            <Pressable onPress={() => removeItem(index)} style={styles.removeButton}>
              <Text style={styles.removeText}>×</Text>
            </Pressable>
          </Animated.View>
        ))}
      </View>
 
      <View style={styles.controls}>
        <Pressable style={styles.button} onPress={addItem}>
          <Text style={styles.buttonText}>Add Item</Text>
        </Pressable>
        <Pressable style={styles.button} onPress={() => setShowBanner(v => !v)}>
          <Text style={styles.buttonText}>Toggle Banner</Text>
        </Pressable>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, gap: 12 },
  banner: { backgroundColor: '#DE8F05', padding: 12, borderRadius: 8 },
  bannerText: { color: '#fff', fontWeight: '700' },
  list: { gap: 6 },
  item: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: '#fff', padding: 14, borderRadius: 8, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 2, elevation: 2 },
  itemText: { fontSize: 16 },
  removeButton: { paddingHorizontal: 8, paddingVertical: 2 },
  removeText: { fontSize: 22, color: '#c0392b' },
  controls: { flexDirection: 'row', gap: 12 },
  button: { flex: 1, backgroundColor: '#0173B2', padding: 14, borderRadius: 8, alignItems: 'center' },
  buttonText: { color: '#fff', fontWeight: '600' },
});

import { Database, Model, Q, tableSchema, appSchema } from '@nozbe/watermelondb';
import { field, date, children, relation, readonly } from '@nozbe/watermelondb/decorators';
import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite';
// => @nozbe/watermelondb: reactive SQLite ORM for complex relational data
 
// => 1. Define schema
const schema = appSchema({
  version: 1,                              // => increment to trigger migration
  tables: [
    tableSchema({
      name: 'posts',
      columns: [
        { name: 'title', type: 'string' },
        { name: 'body', type: 'string' },
        { name: 'author_id', type: 'string', isIndexed: true },
        // => isIndexed: create SQLite index for faster queries
        { name: 'created_at', type: 'number' },
        { name: 'updated_at', type: 'number' },
      ],
    }),
  ],
});
 
// => 2. Define Model class
class Post extends Model {
  static table = 'posts';        // => must match tableSchema name
 
  @field('title') title!: string;           // => maps 'title' column to JS property
  @field('body') body!: string;
  @readonly @date('created_at') createdAt!: Date;
  // => @readonly: no direct writes (set via database.write())
  // => @date: auto-converts Unix timestamp ↔ Date object
  @readonly @date('updated_at') updatedAt!: Date;
}
 
// => 3. Initialize database
const adapter = new SQLiteAdapter({
  schema,
  // => migrations: array of schema migrations for version upgrades
  // => jsi: true — uses JSI for synchronous SQLite access (faster)
});
 
const database = new Database({
  adapter,
  modelClasses: [Post],          // => register all model classes
});
 
// => 4. Usage with React hooks
import { withDatabase, withObservables, compose } from '@nozbe/watermelondb/react';
import { useCallback } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
 
function PostsList({ posts }: { posts: Post[] }) {
  // => posts: Post[] — automatically re-renders when posts change in DB
  const addPost = useCallback(async () => {
    await database.write(async () => {
      // => database.write(): wraps mutations in a transaction
      await database.get<Post>('posts').create(post => {
        post.title = 'New Post';             // => set fields in create callback
        post.body = 'Post content here';
      });
    });
    // => withObservables subscribers (this component) auto-update
  }, []);
 
  return (
    <View style={styles.container}>
      {posts.map(post => (
        <View key={post.id} style={styles.post}>
          <Text style={styles.title}>{post.title}</Text>
          <Text style={styles.body} numberOfLines={2}>{post.body}</Text>
        </View>
      ))}
      <Pressable style={styles.button} onPress={addPost}>
        <Text style={styles.buttonText}>Add Post</Text>
      </Pressable>
    </View>
  );
}
 
// => enhance: connects component to WatermelonDB observable query
const enhance = withObservables([], ({ database }: any) =>
  ({
    posts: database.get('posts').query().observe(),
    // => observe(): returns RxJS Observable that emits on any DB change
    // => withObservables auto-subscribes and triggers re-render
  })
);
 
export default compose(withDatabase, enhance)(PostsList);
// => compose: applies HOCs in order: withDatabase provides db, enhance provides posts
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, gap: 8 },
  post: { backgroundColor: '#fff', padding: 14, borderRadius: 8 },
  title: { fontSize: 15, fontWeight: '700' },
  body: { fontSize: 13, color: '#666', marginTop: 4 },
  button: { backgroundColor: '#0173B2', padding: 14, borderRadius: 8, alignItems: 'center' },
  buttonText: { color: '#fff', fontWeight: '600' },
});

import { create } from "zustand";
import { persist } from "zustand/middleware";
import { MMKV } from "react-native-mmkv";
import NetInfo from "@react-native-community/netinfo";
import { useEffect } from "react";
 
type SyncStatus = "synced" | "pending" | "conflict";
type QueuedAction = {
  id: string; // => unique action ID
  type: "CREATE" | "UPDATE" | "DELETE";
  entity: string; // => 'post' | 'comment' | 'task'
  payload: Record<string, unknown>;
  timestamp: number; // => client timestamp for conflict detection
  attempts: number; // => retry count
};
 
const mmkv = new MMKV({ id: "sync-queue" });
 
type OfflineStore = {
  queue: QueuedAction[];
  isOnline: boolean;
  syncStatus: SyncStatus;
  enqueue: (action: Omit<QueuedAction, "id" | "timestamp" | "attempts">) => void;
  processQueue: () => Promise<void>;
  setOnline: (online: boolean) => void;
};
 
const useOfflineStore = create<OfflineStore>()(
  persist(
    (set, get) => ({
      queue: [], // => pending actions to sync
      isOnline: true,
      syncStatus: "synced",
 
      enqueue: (action) => {
        const queued: QueuedAction = {
          ...action,
          id: `action-${Date.now()}-${Math.random()}`,
          timestamp: Date.now(),
          attempts: 0,
        };
        set((state) => ({ queue: [...state.queue, queued], syncStatus: "pending" }));
        // => Optimistic update: apply locally immediately, sync later
      },
 
      processQueue: async () => {
        const { queue, isOnline } = get();
        if (!isOnline || queue.length === 0) return;
        // => Only process when online and queue has items
 
        const failed: QueuedAction[] = [];
        for (const action of queue) {
          try {
            await fetch(`https://api.example.com/${action.entity}`, {
              method: action.type === "CREATE" ? "POST" : action.type === "UPDATE" ? "PATCH" : "DELETE",
              body: JSON.stringify(action.payload),
              headers: {
                "Content-Type": "application/json",
                "X-Client-Timestamp": String(action.timestamp),
                // => timestamp header: server uses for conflict detection
                // => Last-write-wins: server applies action if client timestamp > server timestamp
              },
            });
            // => success: action removed from queue (not added to failed[])
          } catch {
            if (action.attempts < 3) {
              failed.push({ ...action, attempts: action.attempts + 1 });
              // => retry up to 3 times before dropping
            }
          }
        }
        set({ queue: failed, syncStatus: failed.length > 0 ? "pending" : "synced" });
      },
 
      setOnline: (online) => set({ isOnline: online }),
    }),
    {
      name: "offline-sync-queue",
      storage: {
        setItem: (k, v) => mmkv.set(k, v),
        getItem: (k) => mmkv.getString(k) ?? null,
        removeItem: (k) => mmkv.delete(k),
      },
    },
  ),
);
 
// => Network listener + auto-sync hook
function useNetworkSync() {
  const { processQueue, setOnline } = useOfflineStore();
  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
      const online = Boolean(state.isConnected && state.isInternetReachable);
      setOnline(online);
      if (online) processQueue(); // => auto-process queue when network returns
    });
    return unsubscribe;
  }, []);
}

// Profiling setup — enable in development builds only
import { Performance } from 'react-native';
 
// => 1. User timing API: mark custom performance events
const markStart = (name: string) => Performance.mark(`${name}-start`);
const markEnd = (name: string) => {
  Performance.mark(`${name}-end`);
  Performance.measure(name, `${name}-start`, `${name}-end`);
  // => visible in Hermes profiler timeline as a labeled span
};
 
// => 2. Component render profiling with React DevTools
// => Open React Native DevTools: npx react-native start → press 'j'
// => Or: adb reverse tcp:8097 tcp:8097 → open chrome://inspect → DevTools tab
 
import { Profiler, ProfilerOnRenderCallback } from 'react';
 
const onRender: ProfilerOnRenderCallback = (
  id,            // => component tree identifier
  phase,         // => 'mount' | 'update' | 'nested-update'
  actualDuration, // => time spent rendering (ms)
  baseDuration,   // => estimated time without memoization (ms)
) => {
  if (actualDuration > 16) {
    // => 16ms = 60fps threshold: longer = dropped frame
    console.warn(`Slow render: ${id} took ${actualDuration.toFixed(1)}ms (${phase})`);
  }
};
 
// => Wrap slow components with Profiler
import { View, Text } from 'react-native';
 
function SlowComponent({ data }: { data: string[] }) {
  markStart('SlowComponent-render');
  // => Measure starts here (before render work)
 
  const processed = data.map(item => item.toUpperCase());
  // => Expensive: called on every render
 
  markEnd('SlowComponent-render');
 
  return (
    <Profiler id="SlowComponent" onRender={onRender}>
      <View>
        {processed.map((item, i) => <Text key={i}>{item}</Text>)}
      </View>
    </Profiler>
  );
}
 
// => 3. Hermes Sampling Profiler (CLI)
// => Enable in app: Settings → Debug → Enable Sampling Profiler
// => Or via CLI: adb shell am profile start <pid> /sdcard/profile.trace
// => Download: adb pull /sdcard/profile.trace ./profile.trace
// => Analyze in chrome://tracing or React Native DevTools Performance tab
 
// => Common findings from profiling:
// => - Re-renders from unstable object references (fix: useMemo/useCallback)
// => - Expensive list item renders (fix: React.memo + stable keyExtractor)
// => - Layout thrash from inline style objects (fix: StyleSheet.create)
// => - Bridge serialization (fix: move to worklets/native)

// metro.config.js — Metro 0.84.3
const { getDefaultConfig } = require("expo/metro-config");
 
const config = getDefaultConfig(__dirname);
 
// => 1. Enable tree shaking (removes unused exports)
config.transformer.minifierConfig = {
  compress: {
    dead_code: true, // => remove unreachable code
    drop_console: true, // => remove console.log() in production
    pure_funcs: ["console.info", "console.debug"],
    // => pure_funcs: treat these as side-effect-free (safe to remove if unused)
  },
};
 
// => 2. Bundle analysis: generate stats for visualization
// => npx expo export --platform ios -- --bundle-stats-bundle-size
// => Opens a bundle visualizer (like webpack-bundle-analyzer)
 
// => 3. Custom resolver for platform-specific optimizations
config.resolver.resolveRequest = (context, moduleName, platform) => {
  // => Redirect heavy library to lighter alternative on mobile
  if (moduleName === "lodash" && platform === "android") {
    return { type: "sourceFile", filePath: require.resolve("lodash-es") };
    // => lodash-es: tree-shakeable ES module version (smaller bundles)
  }
  return context.resolveRequest(context, moduleName, platform);
};
 
// => 4. Lazy import for heavy screens
// => Use dynamic import() for rarely-visited screens
// => Metro splits them into separate bundles loaded on demand
 
module.exports = config;
 
// => Common bundle size wins:
// => moment.js → date-fns (100KB → 2KB per used function)
// => lodash → lodash-es with tree shaking (70KB → 2KB per used function)
// => @expo/vector-icons: only import used icon sets
// => Use: import { Ionicons } from '@expo/vector-icons' (tree-shakeable)
// => Avoid: import * as Icons from '@expo/vector-icons' (imports everything)

import { FlatList, View, Text, StyleSheet } from 'react-native';
import { memo, useCallback } from 'react';
 
type Item = { id: string; height: number; title: string };
 
const ITEMS: Item[] = Array.from({ length: 1000 }, (_, i) => ({
  id: `item-${i}`,
  height: 60 + Math.random() * 40,  // => variable height: 60-100pt
  title: `Item ${i + 1}`,
}));
 
const ITEM_HEIGHT = 80;  // => use fixed height for getItemLayout optimization
 
const ListItem = memo(({ item }: { item: Item }) => {
  // => memo(): prevents re-render when parent re-renders with same props
  // => CRITICAL: every FlatList renderItem should be memo'd
  return (
    <View style={[styles.item, { height: item.height }]}>
      <Text style={styles.title}>{item.title}</Text>
    </View>
  );
});
 
export default function PerformanceTunedList() {
  const keyExtractor = useCallback((item: Item) => item.id, []);
  // => useCallback: stable keyExtractor reference prevents FlatList re-render
 
  const renderItem = useCallback(({ item }: { item: Item }) => (
    <ListItem item={item} />
  ), []);
  // => useCallback: stable renderItem reference is critical for FlatList optimization
 
  const getItemLayout = useCallback((_: any, index: number) => ({
    length: ITEM_HEIGHT,          // => item height in pts
    offset: ITEM_HEIGHT * index,  // => distance from list top to this item
    index,
  }), []);
  // => getItemLayout: enables O(1) scroll position calculation (no measurement)
  // => without: FlatList must layout all items to calculate scroll position
  // => with: scrollToIndex works instantly, even for index 999 in a 1000-item list
  // => only usable with FIXED height items
 
  return (
    <FlatList
      data={ITEMS}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      getItemLayout={getItemLayout}      // => provide only for fixed-height items
      removeClippedSubviews={true}       // => unmounts off-screen views (saves memory)
      // => NOTE: can cause blank areas during very fast scroll
      initialNumToRender={10}            // => render 10 items on initial mount (minimum visible)
      maxToRenderPerBatch={10}           // => render up to 10 items per JS batch
      windowSize={10}                    // => render 10 screen-heights worth of items
      // => windowSize: (default 21) reduce for memory savings, increase for scroll smoothness
      updateCellsBatchingPeriod={50}     // => batch cell renders in 50ms windows
      // => updateCellsBatchingPeriod: tradeoff — lower = smoother, higher = fewer re-renders
      contentContainerStyle={styles.content}
    />
  );
}
 
const styles = StyleSheet.create({
  content: { padding: 8 },
  item: {
    backgroundColor: '#fff',
    marginBottom: 4,
    padding: 16,
    borderRadius: 6,
    justifyContent: 'center',
  },
  title: { fontSize: 15, fontWeight: '500' },
});

import { memo, useMemo, useCallback, useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
 
// => CORRECT: memo on expensive component with stable props
const ProductCard = memo(({ name, price, onPress }: {
  name: string;
  price: number;
  onPress: () => void;
}) => {
  // => memo: skips re-render if name, price, and onPress are same reference
  const formatted = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(price);
  // => Intl.NumberFormat: expensive — justified inside memo'd component
  return (
    <Pressable onPress={onPress} style={styles.card}>
      <Text style={styles.cardName}>{name}</Text>
      <Text style={styles.cardPrice}>{formatted}</Text>
    </Pressable>
  );
});
 
export default function MemoDemo() {
  const [count, setCount] = useState(0);
  const [filter, setFilter] = useState('');
 
  const products = [
    { id: '1', name: 'Laptop', price: 15000000 },
    { id: '2', name: 'Phone', price: 8000000 },
  ];
 
  // => CORRECT: useMemo for expensive computation with changing inputs
  const filteredProducts = useMemo(() => {
    return products.filter(p => p.name.toLowerCase().includes(filter.toLowerCase()));
    // => filter runs only when products or filter changes — not on count change
  }, [filter]);
  // => WITHOUT useMemo: re-filters on every count increment (wasteful)
  // => WITH useMemo: filters only when filter input changes (correct)
 
  // => CORRECT: useCallback for stable function reference
  const handlePress = useCallback((id: string) => {
    console.log('Pressed:', id);
  }, []);
  // => WITHOUT useCallback: new function reference on every render → memo() useless
  // => WITH useCallback: stable reference → memo() works as expected
 
  // => WRONG: useMemo for trivial computation (overhead > benefit)
  const doubleCount = count * 2;  // => this is fine: no useMemo needed for simple math
  // => const doubleCount = useMemo(() => count * 2, [count]); // => OVERKILL
 
  // => WRONG: useCallback for inline handler used once (no memo benefit)
  const handleIncrement = () => setCount(c => c + 1);
  // => No child component receives this as prop, so useCallback adds no value
 
  return (
    <View style={styles.container}>
      <Text style={styles.count}>Count: {count} (double: {doubleCount})</Text>
      <Pressable onPress={handleIncrement} style={styles.button}>
        <Text style={styles.buttonText}>Increment (triggers re-render)</Text>
      </Pressable>
      {filteredProducts.map(product => (
        <ProductCard
          key={product.id}
          name={product.name}
          price={product.price}
          onPress={() => handlePress(product.id)}
          // => handlePress is stable (useCallback) → memo() works
          // => () => handlePress(product.id) is NEW on every render
          // => Pass handlePress directly (bind id via data attribute pattern)
        />
      ))}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 24, gap: 12 },
  count: { fontSize: 16 },
  button: { backgroundColor: '#0173B2', padding: 12, borderRadius: 8, alignItems: 'center' },
  buttonText: { color: '#fff', fontWeight: '600' },
  card: { backgroundColor: '#fff', padding: 14, borderRadius: 8 },
  cardName: { fontSize: 15, fontWeight: '600' },
  cardPrice: { color: '#029E73' },
});

// app.json — enable Hermes (default in Expo SDK 55, opt-in for v1)
{
  "expo": {
    "jsEngine": "hermes",
    // => "hermes": enables Hermes v1 (opt-in in SDK 55 for significant perf improvement)
    // => "jsc": JavaScriptCore (legacy, no bytecode compilation)
    "android": { "jsEngine": "hermes" },
    "ios": { "jsEngine": "hermes" }
  }
}
 
// eas.json — Hermes bytecode compilation happens during EAS Build
{
  "build": {
    "production": {
      "android": { "buildType": "apk" },
      "env": { "NODE_ENV": "production" }
      // => EAS Build runs react-native bundle --hermes-flags during production builds
      // => Output: index.android.bundle.hbc (precompiled bytecode)
      // => App loads .hbc directly: NO JS parse time on device
    }
  }
}

// Startup time profiling — measure JS engine initialization
import { PerformanceObserver } from "react-native";
 
// => Hermes startup breakdown:
// => Phase 1: Load bytecode (mmap .hbc file — near-instant)
// => Phase 2: Execute module initialization (top-level require() calls)
// => Phase 3: React rendering (first render to screen)
 
// => Common startup blockers (fix these first):
// => 1. Heavy top-level imports: import at module top level blocks parse
//    BAD:  import * as _ from 'lodash';     // => loads entire lodash at startup
//    GOOD: const { debounce } = await import('lodash/debounce');  // => lazy
 
// => 2. Synchronous storage reads blocking first render:
//    BAD:  const token = AsyncStorage.getItem('token');  // => await blocks startup
//    GOOD: const token = mmkv.getString('session.token');  // => synchronous, fast
 
// => 3. Large initial state computation:
//    BAD:  const [state] = useState(() => processLargeDataset());  // => blocks first render
//    GOOD: defer to useEffect: show skeleton → process → update state
 
// => Hermes v1 improvements (SDK 55 opt-in):
// => - Lazy function compilation: functions compiled only when first called
// => - Improved GC: concurrent mark-and-sweep reduces pause times
// => - Smaller .hbc bytecode: better compression → faster mmap
// => Benchmark: Hermes v1 vs v0: ~15-30% faster app startup
// => EAS Update with Hermes v1: ~75% reduction in OTA update download size
// => (Hermes bytecode diffing: only changed functions recompiled)

// jest.config.js — React Native 0.85+ (NEW separate package)
module.exports = {
  preset: "@react-native/jest-preset",
  // => CRITICAL: In RN 0.85, jest preset moved from 'react-native' to '@react-native/jest-preset'
  // => Old (pre-0.85): preset: 'react-native' (still works but deprecated)
  // => New (0.85+): preset: '@react-native/jest-preset' (install separately)
 
  setupFilesAfterFramework: [
    "@testing-library/react-native/extend-expect",
    // => adds custom matchers: toBeVisible(), toHaveTextContent(), etc.
  ],
  transformIgnorePatterns: [
    "node_modules/(?!(react-native|@react-native|expo|@expo|@shopify/flash-list)/)",
    // => transformIgnorePatterns: Jest ignores node_modules by default
    // => Exception: RN libraries need Babel transform (contain ES module syntax)
    // => Add all @expo/* and @react-native/* packages to the exception list
  ],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1", // => path alias for @/
    "^@components/(.*)$": "<rootDir>/src/components/$1",
    // => must mirror babel.config.js aliases for Jest module resolution
  },
};

// src/components/__tests__/ProductCard.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react-native';
// => @testing-library/react-native: query by accessible text, role, testID
import { ProductCard } from '../ProductCard';
 
describe('ProductCard', () => {
  const mockProduct = {
    id: '1',
    name: 'Laptop Pro',
    price: 15000000,
  };
 
  it('renders product name and formatted price', () => {
    render(<ProductCard product={mockProduct} onPress={jest.fn()} />);
 
    expect(screen.getByText('Laptop Pro')).toBeTruthy();
    // => getByText: finds element with exact text
    expect(screen.getByText(/15\.000\.000/)).toBeTruthy();
    // => regex match: currency formatting varies by locale
  });
 
  it('calls onPress with product id when pressed', () => {
    const onPress = jest.fn();
    render(<ProductCard product={mockProduct} onPress={onPress} />);
 
    fireEvent.press(screen.getByText('Laptop Pro'));
    // => fireEvent.press: simulates a press event
 
    expect(onPress).toHaveBeenCalledTimes(1);
    expect(onPress).toHaveBeenCalledWith('1');
    // => verify onPress called with correct product id
  });
 
  it('shows sale badge when product is on sale', () => {
    render(<ProductCard product={{ ...mockProduct, onSale: true }} onPress={jest.fn()} />);
 
    expect(screen.getByTestId('sale-badge')).toBeTruthy();
    // => getByTestId: finds by testID prop (use for non-visible-text elements)
  });
 
  it('is accessible with correct role', () => {
    render(<ProductCard product={mockProduct} onPress={jest.fn()} />);
 
    const card = screen.getByRole('button');
    // => getByRole: finds by ARIA role (button, link, heading, list, listitem, etc.)
    expect(card).toBeTruthy();
  });
});

// __mocks__/react-native-mmkv.ts — manual mock for MMKV
const mmkvStore = new Map<string, string | boolean | number>();
 
const MMKV = jest.fn().mockImplementation(() => ({
  // => jest.fn().mockImplementation: creates mock class instance
  set: jest.fn((key: string, value: string | boolean | number) => {
    mmkvStore.set(key, value);
    // => mock implementation: store in in-memory Map
  }),
  getString: jest.fn((key: string) => mmkvStore.get(key) as string | undefined),
  getBoolean: jest.fn((key: string) => mmkvStore.get(key) as boolean | undefined),
  getNumber: jest.fn((key: string) => mmkvStore.get(key) as number | undefined),
  delete: jest.fn((key: string) => mmkvStore.delete(key)),
  clearAll: jest.fn(() => mmkvStore.clear()),
}));
 
export { MMKV };

// jest.setup.ts — global mock setup
import { jest } from "@jest/globals";
 
// => Mock expo modules
jest.mock("expo-notifications", () => ({
  getPermissionsAsync: jest.fn(() => Promise.resolve({ status: "granted" })),
  requestPermissionsAsync: jest.fn(() => Promise.resolve({ status: "granted" })),
  getExpoPushTokenAsync: jest.fn(() => Promise.resolve({ data: "ExponentPushToken[mock]" })),
  setNotificationHandler: jest.fn(),
  addNotificationReceivedListener: jest.fn(() => ({ remove: jest.fn() })),
  // => returns object with remove() to simulate subscription cleanup
  addNotificationResponseReceivedListener: jest.fn(() => ({ remove: jest.fn() })),
}));
 
jest.mock("expo-location", () => ({
  requestForegroundPermissionsAsync: jest.fn(() => Promise.resolve({ status: "granted" })),
  getCurrentPositionAsync: jest.fn(() =>
    Promise.resolve({
      coords: { latitude: -6.2146, longitude: 106.8451, accuracy: 10, altitude: null, speed: null },
    }),
  ),
  Accuracy: { High: 4, Balanced: 3, Low: 2 },
}));
 
// => Platform-specific mocks
jest.mock("react-native/Libraries/Utilities/Platform", () => ({
  OS: "ios", // => test as iOS by default
  select: jest.fn((obj) => obj.ios ?? obj.default),
  Version: "17.5",
  isPad: false,
}));

// Testing a component that uses mocked native modules
import { render, screen, waitFor } from '@testing-library/react-native';
import { LocationButton } from '../LocationButton';
 
test('shows location after permission granted', async () => {
  render(<LocationButton />);
 
  await waitFor(() => {
    expect(screen.getByText('-6.2146, 106.8451')).toBeTruthy();
    // => waitFor: waits for async state update from mocked location
  });
 
  // => Verify the mock was called correctly
  const Location = require('expo-location');
  expect(Location.requestForegroundPermissionsAsync).toHaveBeenCalledTimes(1);
  expect(Location.getCurrentPositionAsync).toHaveBeenCalledWith(
    expect.objectContaining({ accuracy: 4 })  // => Accuracy.High = 4
  );
});

// e2e/login.test.ts — Detox test
import { device, element, by, expect as detoxExpect, waitFor } from "detox";
 
describe("Login Flow", () => {
  beforeAll(async () => {
    await device.launchApp({
      // => device.launchApp: launch the built app binary
      newInstance: true, // => fresh launch (clear state)
      permissions: { notifications: "YES" },
      // => grant permissions before launch (avoids permission dialog during test)
    });
  });
 
  beforeEach(async () => {
    await device.reloadReactNative();
    // => reset React Native state between tests without full restart
  });
 
  it("should show login screen on cold launch", async () => {
    await detoxExpect(element(by.id("login-screen"))).toBeVisible();
    // => by.id: finds element by testID prop
    // => toBeVisible: element is on screen and not hidden
  });
 
  it("should show error for invalid credentials", async () => {
    await element(by.id("email-input")).typeText("invalid@test.com");
    // => typeText: simulates keyboard input
    await element(by.id("password-input")).typeText("wrongpassword");
    await element(by.id("login-button")).tap();
    // => tap: simulates a finger press
 
    await waitFor(element(by.text("Invalid email or password")))
      .toBeVisible()
      .withTimeout(5000);
    // => waitFor: polls until condition met (or timeout)
    // => async: test waits for server response and UI update
  });
 
  it("should navigate to home after successful login", async () => {
    await element(by.id("email-input")).typeText("valid@test.com");
    await element(by.id("password-input")).typeText("correctpassword");
 
    await element(by.id("login-button")).tap();
 
    await waitFor(element(by.id("home-screen")))
      .toBeVisible()
      .withTimeout(10000);
    // => 10s timeout: allows for auth API response + navigation animation
 
    await detoxExpect(element(by.text("Welcome, valid@test.com"))).toBeVisible();
    // => by.text: finds element by visible text content
  });
 
  it("should remember login after app background/foreground", async () => {
    // Login first
    await element(by.id("email-input")).typeText("valid@test.com");
    await element(by.id("password-input")).typeText("correctpassword");
    await element(by.id("login-button")).tap();
 
    await waitFor(element(by.id("home-screen")))
      .toBeVisible()
      .withTimeout(10000);
 
    await device.sendToHome(); // => background app
    await device.launchApp({ newInstance: false }); // => foreground app
    // => newInstance: false = resume same instance (not fresh launch)
 
    await detoxExpect(element(by.id("home-screen"))).toBeVisible();
    // => verify: still logged in after background/foreground cycle
  });
});

{
  "cli": {
    "version": ">= 14.0.0",
    "appVersionSource": "remote"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": false,
        "buildConfiguration": "Debug"
      },
      "android": {
        "buildType": "apk",
        "gradleCommand": ":app:assembleDebug"
      },
      "env": {
        "NODE_ENV": "development",
        "API_URL": "https://dev.api.example.com"
      }
    },
    "preview": {
      "distribution": "internal",
      "channel": "preview",
      "ios": {
        "buildConfiguration": "Release",
        "simulator": false
      },
      "android": {
        "buildType": "apk"
      },
      "env": {
        "NODE_ENV": "production",
        "API_URL": "https://staging.api.example.com"
      }
    },
    "production": {
      "channel": "production",
      "ios": {
        "buildConfiguration": "Release"
      },
      "android": {
        "buildType": "app-bundle"
      },
      "env": {
        "NODE_ENV": "production",
        "API_URL": "https://api.example.com"
      },
      "cache": {
        "key": "production-v1"
      }
    }
  },
  "submit": {
    "production": {
      "ios": {
        "appleId": "developer@example.com",
        "ascAppId": "1234567890"
      },
      "android": {
        "serviceAccountKeyPath": "./google-services.json",
        "track": "internal"
      }
    }
  }
}

# EAS Build commands
eas build --profile development --platform ios   # => Build development IPA
# => development: includes Expo Dev Client for in-app debugging
 
eas build --profile preview --platform all       # => Build both platforms as preview
# => preview: production-signed build for internal testing (TestFlight/Google Play Internal)
 
eas build --profile production --platform all    # => Production build
# => production: App Store / Play Store ready binary
# => cache.key: invalidate build cache when dependencies change significantly
 
eas build:list                                    # => List recent builds with status + download links

# EAS Update commands
eas update --channel production --message "Fix login crash"
# => Bundles JS, uploads to EAS CDN, notifies devices on 'production' channel
# => Devices download update on next app foreground (or background check)
 
eas update --channel preview --platform ios --message "New feature: dark mode"
# => Platform-specific update: iOS gets dark mode, Android builds later
 
eas update:list --channel production    # => List recent updates with deployment stats
# => Shows: download count, active installs, rollback status
 
eas update:rollback --channel production --group <update-group-id>
# => Rollback: revert channel to previous update immediately
# => All devices on channel download the reverted bundle on next check

// In-app update check (expo-updates)
import * as Updates from "expo-updates";
import { useEffect } from "react";
import { Alert } from "react-native";
 
export function useOTAUpdates() {
  useEffect(() => {
    async function checkForUpdate() {
      if (__DEV__) return; // => skip in development (no updates in dev)
 
      try {
        const update = await Updates.checkForUpdateAsync();
        // => checkForUpdateAsync: queries EAS CDN for new bundle on current channel
 
        if (update.isAvailable) {
          await Updates.fetchUpdateAsync();
          // => fetchUpdateAsync: downloads new bundle (background download)
 
          Alert.alert("Update Available", "A new version is ready. Restart to apply the update.", [
            { text: "Later", style: "cancel" },
            {
              text: "Restart",
              onPress: async () => {
                await Updates.reloadAsync();
                // => reloadAsync: restarts the JS runtime with the new bundle
                // => Native code unchanged — only JS/assets update
              },
            },
          ]);
        }
      } catch (error) {
        console.error("OTA update check failed:", error);
        // => Failure is non-fatal: users continue with current bundle
      }
    }
 
    checkForUpdate();
  }, []);
}

# iOS submission
eas submit --platform ios --latest
# => --latest: submits the most recent production EAS Build
# => Requires: ASC API key (in eas.json submit.production.ios)
# => Uploads IPA to App Store Connect TestFlight automatically
 
eas submit --platform ios --path ./MyApp.ipa
# => Submit a specific IPA file (manual builds)
 
# Android submission
eas submit --platform android --latest
# => Submits .aab to Google Play Console
# => Requires: Google Play API service account JSON (serviceAccountKeyPath)
# => track: 'internal' | 'alpha' | 'beta' | 'production'
 
# Both platforms in parallel
eas submit --platform all --latest

// app.json — versioning configuration
{
  "expo": {
    "version": "2.5.0",
    // => version: user-visible version string (CFBundleShortVersionString on iOS)
    "ios": {
      "buildNumber": "42",
      // => buildNumber: iTunes Connect build number (must increment with each submission)
      // => Managed by EAS Build when "cli.appVersionSource": "remote"
    },
    "android": {
      "versionCode": 42,
      // => versionCode: Play Store version code (integer, must increment)
      // => EAS Build auto-increments when "appVersionSource": "remote"
    }
  }
}

# ios/fastlane/Fastfile
lane :setup_signing do
  match(
    type: 'appstore',
    # => match: downloads certificates + provisioning profiles from private git repo
    # => Encrypted in git: team members clone repo to set up signing
    app_identifier: 'com.example.myapp',
    readonly: true,          # => don't regenerate certs (true for CI)
  )
end
 
lane :beta do
  setup_signing                          # => fetch signing certificates
 
  increment_build_number(
    xcodeproj: 'MyApp.xcodeproj',
    build_number: latest_testflight_build_number + 1,
    # => auto-increment: always one above current TestFlight build
  )
 
  gym(
    # => gym: Xcode build and archive
    scheme: 'MyApp',
    configuration: 'Release',
    output_directory: './build',
    output_name: 'MyApp.ipa',
    export_method: 'app-store',         # => 'app-store' | 'ad-hoc' | 'enterprise'
  )
 
  pilot(
    # => pilot: upload to TestFlight
    ipa: './build/MyApp.ipa',
    skip_waiting_for_build_processing: true,
    # => skip_waiting: don't block CI on Apple's processing (takes 10-30 min)
    distribute_external: false,          # => internal testers only
  )
end
 
lane :release do
  setup_signing
  gym(scheme: 'MyApp', configuration: 'Release', export_method: 'app-store')
  deliver(
    # => deliver: submit to App Store for review
    force: true,                          # => don't prompt for confirmation
    skip_screenshots: true,               # => use existing screenshots
    skip_metadata: false,                 # => update app metadata from metadata/ folder
    submit_for_review: true,
    automatic_release: false,             # => manual release after approval
  )
end

# .github/workflows/ci.yml
name: CI / EAS Build
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
env:
  EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
  # => EXPO_TOKEN: EAS authentication token (set in GitHub repo secrets)
 
jobs:
  lint-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - uses: actions/setup-node@v4
        with:
          node-version: "22"
          cache: "npm" # => cache node_modules
 
      - name: Install dependencies
        run: npm ci
        # => npm ci: clean install (faster than npm install, uses package-lock.json)
 
      - name: TypeScript check
        run: npx tsc --noEmit
        # => noEmit: type check without generating JS files
 
      - name: Lint
        run: npm run lint
 
      - name: Unit Tests
        run: npm test -- --coverage --forceExit
        # => --coverage: generate coverage report
        # => --forceExit: kill Jest after tests complete (prevents hanging)
 
  eas-build:
    runs-on: ubuntu-latest
    needs: lint-and-test # => only build if lint + tests pass
    if: github.ref == 'refs/heads/main' # => only on main branch pushes
    steps:
      - uses: actions/checkout@v4
 
      - uses: actions/setup-node@v4
        with:
          node-version: "22"
          cache: "npm"
 
      - name: Install EAS CLI
        run: npm install -g eas-cli@latest
 
      - name: Install dependencies
        run: npm ci
 
      - name: EAS Build (both platforms, production profile)
        run: eas build --platform all --profile production --non-interactive
        # => --non-interactive: no prompts (required for CI)
        # => Builds queue on EAS workers, run asynchronously
        # => CI job completes after build is queued (not after it finishes)
 
      # => Optional: EAS Update on main push (OTA JS update only)
      - name: EAS Update
        if: github.event_name == 'push'
        run: eas update --channel production --message "${{ github.event.head_commit.message }}" --non-interactive

// app.json — production configuration checklist
{
  "expo": {
    "name": "MyApp",
    "slug": "myapp",
    "version": "2.5.0",              // => semantic version: MAJOR.MINOR.PATCH
    "orientation": "portrait",       // => lock orientation (unless app supports landscape)
    "userInterfaceStyle": "automatic",  // => 'light' | 'dark' | 'automatic' (respects system)
    "icon": "./assets/icon.png",     // => 1024x1024 PNG, no alpha (iOS requirement)
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "bundleIdentifier": "com.example.myapp",   // => unique reverse-domain ID
      "buildNumber": "42",                        // => auto-managed by EAS
      "supportsTablet": true,
      "config": {
        "usesNonExemptEncryption": false          // => false: no custom encryption (avoids export compliance form)
      },
      "privacyManifests": {
        // => iOS 17+ REQUIRED: declare API usage reasons
        "NSPrivacyAccessedAPITypes": [
          {
            "NSPrivacyAccessedAPIType": "NSPrivacyAccessedAPICategoryUserDefaults",
            "NSPrivacyAccessedAPITypeReasons": ["CA92.1"]
            // => CA92.1: UserDefaults access for app functionality
            // => Without this manifest: App Store rejection since May 2024
          }
        ]
      }
    },
    "android": {
      "package": "com.example.myapp",
      "versionCode": 42,
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",  // => 1024x1024 adaptive icon
        "backgroundColor": "#0173B2"
      },
      "permissions": [
        "CAMERA",
        "ACCESS_FINE_LOCATION",
        "POST_NOTIFICATIONS"            // => Android 13+ requires explicit permission
      ]
    }
  }
}
 
// Screenshot requirements:
// iOS: 6.9" (iPhone 16 Pro Max), 12.9" (iPad Pro) — mandatory sizes
// Android: Phone (1080x1920+), 7" tablet, 10" tablet
// Generate with: npx expo export --platform web → screenshot in browser at correct size
// Or use ScreenshotBot / Fastlane snapshot for automated screenshots

import * as Sentry from "@sentry/react-native";
// => @sentry/react-native: crash reporting + APM for React Native
 
Sentry.init({
  dsn: "https://your-dsn@sentry.io/project-id",
  // => dsn: Data Source Name — endpoint for your Sentry project
 
  environment: __DEV__ ? "development" : process.env.NODE_ENV,
  // => environment: 'development' | 'staging' | 'production' (filter in Sentry dashboard)
 
  tracesSampleRate: 0.2,
  // => tracesSampleRate: 20% of sessions tracked for performance monitoring
  // => 1.0 = 100% (high cost), 0.1 = 10% (low cost, less data)
 
  profilesSampleRate: 0.1,
  // => profilesSampleRate: 10% of traces include CPU profiling data
 
  integrations: [
    Sentry.reactNativeTracingIntegration({
      routingInstrumentation: Sentry.reactNavigationInstrumentation(),
      // => Tracks navigation transitions as Sentry traces
    }),
  ],
 
  beforeSend(event) {
    // => beforeSend: modify or filter events before sending
    if (__DEV__) {
      return null; // => don't send errors during development
    }
    return event;
  },
});
 
// => Wrap root component with Sentry error boundary
export default Sentry.wrap(App);
// => Sentry.wrap: catches unhandled errors at React tree level
 
// => Manual error capture
function processPayment(amount: number) {
  try {
    // ... payment logic
  } catch (error) {
    Sentry.captureException(error, {
      tags: { component: "payment", currency: "IDR" },
      extra: { amount },
      // => tags: searchable key-value in Sentry
      // => extra: additional context (not searchable)
    });
    throw error; // => re-throw after capturing
  }
}
 
// => Performance monitoring
const transaction = Sentry.startTransaction({ name: "load-products" });
// => manual transaction: track custom operations
const span = transaction.startChild({ op: "api.fetch", description: "GET /products" });
// => spans: child operations within a transaction
const products = await fetchProducts();
span.finish();
transaction.finish();
// => visible in Sentry Performance tab with timing breakdown

// ios/ExampleModule.swift
import ExpoModulesCore
// => expo-modules-core: the Expo Modules API runtime
 
public class ExampleModule: Module {
  // => Module: base class for Expo modules
 
  public func definition() -> ModuleDefinition {
    // => definition(): declares the module's API (called at startup)
    Name("ExampleModule")
    // => Name: registered name for NativeModules.ExampleModule
 
    Function("computeHash") { (input: String) -> String in
      // => Function: exposes a synchronous function to JS
      // => input: String — TypeScript string is auto-mapped to Swift String
      // => returns String — Swift String auto-mapped to TypeScript string
      var hash = 0
      for char in input.unicodeScalars {
        hash = (hash &* 31) &+ Int(char.value)
        // => &*: overflow-safe multiplication (Swift Int can overflow)
      }
      return String(hash, radix: 16)          // => hex string
    }
 
    AsyncFunction("fetchDeviceInfo") { () -> [String: String] in
      // => AsyncFunction: returns Promise to JS (runs on background thread)
      // => [String: String] dict auto-mapped to TypeScript Record<string, string>
      return [
        "model": UIDevice.current.model,
        "systemVersion": UIDevice.current.systemVersion,
        "name": UIDevice.current.name,
      ]
    }
 
    Events("onDataChanged")
    // => Events: declares events this module can emit
    // => In JS: module.addListener('onDataChanged', callback)
  }
}

// JavaScript usage
import { requireNativeModule, EventEmitter } from "expo-modules-core";
 
const ExampleModule = requireNativeModule("ExampleModule");
// => requireNativeModule: typed access to the native module
 
const hash = ExampleModule.computeHash("hello world");
// => synchronous: returns '461fb5d8' (hex hash)
 
const info = await ExampleModule.fetchDeviceInfo();
// => async: returns { model: 'iPhone', systemVersion: '18.4', name: 'Fatima's iPhone' }
 
// Event listening
const emitter = new EventEmitter(ExampleModule);
const sub = emitter.addListener("onDataChanged", (data) => {
  console.log("Data changed:", data);
});
// => cleanup: sub.remove() in useEffect cleanup

import { createContext, useContext, useReducer, useCallback, ReactNode } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
 
type Step = 'account' | 'profile' | 'payment' | 'review';
 
type WizardState = {
  currentStep: Step;
  data: {
    account?: { email: string; password: string };
    profile?: { name: string; bio: string };
    payment?: { cardLast4: string };
  };
  errors: Partial<Record<Step, string>>;
  completed: Set<Step>;
};
 
type WizardAction =
  | { type: 'NEXT_STEP' }
  | { type: 'PREV_STEP' }
  | { type: 'SET_DATA'; step: Step; data: WizardState['data'][Step] }
  | { type: 'SET_ERROR'; step: Step; message: string }
  | { type: 'COMPLETE_STEP'; step: Step };
// => discriminated union: TypeScript narrows action.data based on action.type
 
const STEPS: Step[] = ['account', 'profile', 'payment', 'review'];
 
function wizardReducer(state: WizardState, action: WizardAction): WizardState {
  switch (action.type) {
    case 'NEXT_STEP': {
      const currentIndex = STEPS.indexOf(state.currentStep);
      const nextStep = STEPS[currentIndex + 1] ?? state.currentStep;
      return { ...state, currentStep: nextStep };
      // => spread: immutable update (never mutate state directly)
    }
    case 'PREV_STEP': {
      const currentIndex = STEPS.indexOf(state.currentStep);
      const prevStep = STEPS[currentIndex - 1] ?? state.currentStep;
      return { ...state, currentStep: prevStep };
    }
    case 'SET_DATA':
      return { ...state, data: { ...state.data, [action.step]: action.data } };
      // => nested immutable update: spread outer, set key
    case 'COMPLETE_STEP':
      return { ...state, completed: new Set([...state.completed, action.step]) };
    default:
      return state;
  }
}
 
const WizardContext = createContext<{
  state: WizardState;
  dispatch: React.Dispatch<WizardAction>;
} | null>(null);
 
function WizardProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(wizardReducer, {
    currentStep: 'account',
    data: {},
    errors: {},
    completed: new Set(),
  });
 
  return (
    <WizardContext.Provider value={{ state, dispatch }}>
      {children}
    </WizardContext.Provider>
  );
}
 
function useWizard() {
  const context = useContext(WizardContext);
  if (!context) throw new Error('useWizard must be used within WizardProvider');
  // => Guard: prevents using the hook outside the provider tree
  return context;
}
 
function StepIndicator() {
  const { state } = useWizard();
  return (
    <View style={styles.steps}>
      {STEPS.map((step) => (
        <View key={step} style={[styles.step, state.currentStep === step && styles.activeStep, state.completed.has(step) && styles.completedStep]}>
          <Text style={styles.stepText}>{step}</Text>
        </View>
      ))}
    </View>
  );
}
 
export default function RegistrationWizard() {
  return (
    <WizardProvider>
      <View style={styles.container}>
        <StepIndicator />
        {/* => StepContent, StepNavigation components use useWizard() */}
      </View>
    </WizardProvider>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 24 },
  steps: { flexDirection: 'row', gap: 8, marginBottom: 24 },
  step: { flex: 1, padding: 8, backgroundColor: '#f0f0f0', borderRadius: 6, alignItems: 'center' },
  activeStep: { backgroundColor: '#0173B2' },
  completedStep: { backgroundColor: '#029E73' },
  stepText: { fontSize: 11, fontWeight: '600', color: '#333' },
});