Media Basics

npx create-expo-app@latest MediaBasics --template default@sdk-57
cd MediaBasics
npx expo install expo-image expo-camera expo-video

{
  "dependencies": {
    "expo": "~57.0.4",
    "react": "19.2.3",
    "react-native": "0.86.0"
  }
}

Capture   → camera hardware, permissions, temporary file URIs
Playback  → decoders, buffering, audio session, background modes
Editing   → CPU/GPU transforms, often blocking unless offloaded
Display   → image views, caching, recycling in lists

// src/media/moduleMap.ts
export const mediaModules = {
  capture: {
    livePreview: "expo-camera",
    libraryPick: "expo-image-picker",
    systemCameraIntent: "expo-image-picker.launchCameraAsync",
  },
  display: {
    remoteAndLocal: "expo-image",
    legacyOnly: "react-native Image", // avoid for new feeds
  },
  playback: {
    video: "expo-video",
    audioOnly: "expo-audio",
  },
  edit: {
    resizeCompress: "expo-image-manipulator",
    heavyVideo: "native pipeline or cloud transcode",
  },
} as const;

// src/media/captureChoice.ts
import * as ImagePicker from "expo-image-picker";
 
export async function quickAttachFromGallery() {
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== "granted") return null;
 
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ["images"],
    quality: 0.7,
    allowsEditing: true,
  });
 
  return result.canceled ? null : result.assets[0];
}

npx expo install expo-image

// src/media/Avatar.tsx
import { Image } from "expo-image";
import { StyleSheet, View } from "react-native";
 
type Props = {
  uri: string;
  blurhash?: string;
  size?: number;
};
 
export function Avatar({ uri, blurhash, size = 48 }: Props) {
  return (
    <View style={[styles.ring, { width: size, height: size, borderRadius: size / 2 }]}>
      <Image
        source={{ uri }}
        placeholder={blurhash ? { blurhash } : undefined}
        contentFit="cover"
        transition={200}
        cachePolicy="memory-disk"
        style={{ width: size, height: size, borderRadius: size / 2 }}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  ring: { overflow: "hidden", backgroundColor: "#e5e7eb" },
});

npx expo install expo-video

// src/media/InlineClip.tsx
import { useVideoPlayer, VideoView } from "expo-video";
import { StyleSheet, View } from "react-native";
 
type Props = { uri: string };
 
export function InlineClip({ uri }: Props) {
  const player = useVideoPlayer(uri, (p) => {
    p.loop = true;
    p.muted = true;
    p.play();
  });
 
  return (
    <View style={styles.box}>
      <VideoView style={styles.video} player={player} contentFit="cover" />
    </View>
  );
}
 
const styles = StyleSheet.create({
  box: { width: "100%", aspectRatio: 16 / 9, backgroundColor: "#000" },
  video: { flex: 1 },
});

npx expo install expo-image-manipulator

// src/media/prepareUpload.ts
import * as ImageManipulator from "expo-image-manipulator";
 
export async function preparePhotoForUpload(localUri: string) {
  const result = await ImageManipulator.manipulateAsync(
    localUri,
    [{ resize: { width: 1920 } }],
    { compress: 0.75, format: ImageManipulator.SaveFormat.JPEG }
  );
  return result.uri;
}

Risky:  setState(fullResUri) → <Image source={{ uri }} /> in FlatList
Safer:  manipulateAsync → max width 1280–1920 → upload temp file

// src/media/ScanGate.tsx
import { CameraView } from "expo-camera";
import { useCallback, useRef } from "react";
import { StyleSheet, Text, View } from "react-native";
 
type Props = { onCode: (data: string) => void };
 
export function ScanGate({ onCode }: Props) {
  const lastScan = useRef(0);
 
  const handleScan = useCallback(
    ({ data }: { data: string }) => {
      const now = Date.now();
      if (now - lastScan.current < 1500) return;
      lastScan.current = now;
      onCode(data);
    },
    [onCode]
  );
 
  return (
    <View style={styles.root}>
      <CameraView
        style={styles.camera}
        barcodeScannerSettings={{ barcodeTypes: ["qr", "code128"] }}
        onBarcodeScanned={handleScan}
      />
      <Text style={styles.hint}>Align code inside the frame</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  root: { flex: 1 },
  camera: { flex: 1 },
  hint: { position: "absolute", bottom: 48, alignSelf: "center", color: "#fff" },
});

// src/media/FocusedCamera.tsx
import { CameraView, useCameraPermissions } from "expo-camera";
import { useIsFocused } from "@react-navigation/native";
import { StyleSheet, Text, View } from "react-native";
 
export function FocusedCamera() {
  const isFocused = useIsFocused();
  const [permission, requestPermission] = useCameraPermissions();
 
  if (!permission?.granted) {
    return (
      <View style={styles.gate}>
        <Text onPress={requestPermission}>Allow camera</Text>
      </View>
    );
  }
 
  if (!isFocused) {
    return <View style={styles.placeholder} />;
  }
 
  return <CameraView style={styles.camera} facing="back" />;
}
 
const styles = StyleSheet.create({
  gate: { flex: 1, justifyContent: "center", alignItems: "center" },
  placeholder: { flex: 1, backgroundColor: "#000" },
  camera: { flex: 1 },
});

// src/media/seedAvatarCache.ts
import { Image } from "expo-image";
 
export async function seedAvatarCache(localUri: string, userId: string) {
  const cacheKey = `avatar:${userId}`;
  await Image.writeToCacheAsync(localUri, cacheKey);
  return { uri: localUri, cacheKey };
}

<Image
  source={{ uri: localUri, cacheKey: `avatar:${userId}` }}
  contentFit="cover"
  style={{ width: 48, height: 48, borderRadius: 24 }}
/>

// src/media/DualPlayerSwap.tsx
import { useCallback, useState } from "react";
import { Pressable, Text, View } from "react-native";
import { useVideoPlayer, VideoView, VideoSource } from "expo-video";
 
const clipA: VideoSource =
  "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4";
const clipB: VideoSource =
  "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4";
 
export function DualPlayerSwap() {
  const playerA = useVideoPlayer(clipA, (p) => p.play());
  const playerB = useVideoPlayer(clipB);
  const [current, setCurrent] = useState(playerA);
 
  const swap = useCallback(() => {
    current.pause();
    if (current === playerA) {
      playerB.play();
      setCurrent(playerB);
    } else {
      playerA.play();
      setCurrent(playerA);
    }
  }, [current, playerA, playerB]);
 
  return (
    <View style={{ flex: 1 }}>
      <VideoView player={current} style={{ flex: 1 }} contentFit="contain" />
      <Pressable onPress={swap} style={{ padding: 16 }}>
        <Text>Next clip</Text>
      </Pressable>
    </View>
  );
}

npx expo install expo-dev-client react-native-maps @shopify/react-native-skia

react-native-maps  → MapView, markers, tiles, clustering
react-native-skia  → Canvas, charts, GPU paths, custom shaders