1# Media
2 
3## Camera
4 
5- Hide navigation headers when there's a full screen camera
6- Ensure to flip the camera with `mirror` to emulate social apps
7- Use liquid glass buttons on cameras
8- Icons: `arrow.triangle.2.circlepath` (flip), `photo` (gallery), `bolt` (flash)
9- Eagerly request camera permission
10- Lazily request media library permission
11 
12```tsx
13import React, { useRef, useState } from "react";
14import { View, TouchableOpacity, Text, Alert } from "react-native";
15import { CameraView, CameraType, useCameraPermissions } from "expo-camera";
16import * as MediaLibrary from "expo-media-library";
17import * as ImagePicker from "expo-image-picker";
18import * as Haptics from "expo-haptics";
19import { SymbolView } from "expo-symbols";
20import { PlatformColor } from "react-native";
21import { GlassView } from "expo-glass-effect";
22import { useSafeAreaInsets } from "react-native-safe-area-context";
23 
24function Camera({ onPicture }: { onPicture: (uri: string) => Promise<void> }) {
25  const [permission, requestPermission] = useCameraPermissions();
26  const cameraRef = useRef<CameraView>(null);
27  const [type, setType] = useState<CameraType>("back");
28  const { bottom } = useSafeAreaInsets();
29 
30  if (!permission?.granted) {
31    return (
32      <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: PlatformColor("systemBackground") }}>
33        <Text style={{ color: PlatformColor("label"), padding: 16 }}>Camera access is required</Text>
34        <GlassView isInteractive tintColor={PlatformColor("systemBlue")} style={{ borderRadius: 12 }}>
35          <TouchableOpacity onPress={requestPermission} style={{ padding: 12, borderRadius: 12 }}>
36            <Text style={{ color: "white" }}>Grant Permission</Text>
37          </TouchableOpacity>
38        </GlassView>
39      </View>
40    );
41  }
42 
43  const takePhoto = async () => {
44    await Haptics.selectionAsync();
45    if (!cameraRef.current) return;
46    const photo = await cameraRef.current.takePictureAsync({ quality: 0.8 });
47    await onPicture(photo.uri);
48  };
49 
50  const selectPhoto = async () => {
51    await Haptics.selectionAsync();
52    const result = await ImagePicker.launchImageLibraryAsync({
53      mediaTypes: "images",
54      allowsEditing: false,
55      quality: 0.8,
56    });
57    if (!result.canceled && result.assets?.[0]) {
58      await onPicture(result.assets[0].uri);
59    }
60  };
61 
62  return (
63    <View style={{ flex: 1, backgroundColor: "black" }}>
64      <CameraView ref={cameraRef} mirror style={{ flex: 1 }} facing={type} />
65      <View style={{ position: "absolute", left: 0, right: 0, bottom: bottom, gap: 16, alignItems: "center" }}>
66        <GlassView isInteractive style={{ padding: 8, borderRadius: 99 }}>
67          <TouchableOpacity onPress={takePhoto} style={{ width: 64, height: 64, borderRadius: 99, backgroundColor: "white" }} />
68        </GlassView>
69        <View style={{ flexDirection: "row", justifyContent: "space-around", paddingHorizontal: 8 }}>
70          <GlassButton onPress={selectPhoto} icon="photo" />
71          <GlassButton onPress={() => setType(t => t === "back" ? "front" : "back")} icon="arrow.triangle.2.circlepath" />
72        </View>
73      </View>
74    </View>
75  );
76}
77```
78 
79## Audio Playback
80 
81Use `expo-audio` not `expo-av`:
82 
83```tsx
84import { useAudioPlayer } from 'expo-audio';
85 
86const player = useAudioPlayer({ uri: 'https://stream.nightride.fm/rektory.mp3' });
87 
88<Button title="Play" onPress={() => player.play()} />
89```
90 
91## Audio Recording (Microphone)
92 
93```tsx
94import {
95  useAudioRecorder,
96  AudioModule,
97  RecordingPresets,
98  setAudioModeAsync,
99  useAudioRecorderState,
100} from 'expo-audio';
101import { useEffect } from 'react';
102import { Alert, Button } from 'react-native';
103 
104function App() {
105  const audioRecorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
106  const recorderState = useAudioRecorderState(audioRecorder);
107 
108  const record = async () => {
109    await audioRecorder.prepareToRecordAsync();
110    audioRecorder.record();
111  };
112 
113  const stop = () => audioRecorder.stop();
114 
115  useEffect(() => {
116    (async () => {
117      const status = await AudioModule.requestRecordingPermissionsAsync();
118      if (status.granted) {
119        setAudioModeAsync({ playsInSilentMode: true, allowsRecording: true });
120      } else {
121        Alert.alert('Permission to access microphone was denied');
122      }
123    })();
124  }, []);
125 
126  return (
127    <Button
128      title={recorderState.isRecording ? 'Stop' : 'Start'}
129      onPress={recorderState.isRecording ? stop : record}
130    />
131  );
132}
133```
134 
135## Video Playback
136 
137Use `expo-video` not `expo-av`:
138 
139```tsx
140import { useVideoPlayer, VideoView } from 'expo-video';
141import { useEvent } from 'expo';
142 
143const videoSource = 'https://example.com/video.mp4';
144 
145const player = useVideoPlayer(videoSource, player => {
146  player.loop = true;
147  player.play();
148});
149 
150const { isPlaying } = useEvent(player, 'playingChange', { isPlaying: player.playing });
151 
152<VideoView player={player} fullscreenOptions={{}} allowsPictureInPicture />
153```
154 
155VideoView options:
156- `allowsPictureInPicture`: boolean
157- `contentFit`: 'contain' | 'cover' | 'fill'
158- `nativeControls`: boolean
159- `playsInline`: boolean
160- `startsPictureInPictureAutomatically`: boolean
161 
162## Saving Media
163 
164```tsx
165import * as MediaLibrary from "expo-media-library";
166 
167const { granted } = await MediaLibrary.requestPermissionsAsync();
168if (granted) {
169  await MediaLibrary.saveToLibraryAsync(uri);
170}
171```
172 
173### Saving Base64 Images
174 
175`MediaLibrary.saveToLibraryAsync` only accepts local file paths. Save base64 strings to disk first:
176 
177```tsx
178import { File, Paths } from "expo-file-system/next";
179 
180function base64ToLocalUri(base64: string, filename?: string) {
181  if (!filename) {
182    const match = base64.match(/^data:(image\/[a-zA-Z]+);base64,/);
183    const ext = match ? match[1].split("/")[1] : "jpg";
184    filename = `generated-${Date.now()}.${ext}`;
185  }
186 
187  if (base64.startsWith("data:")) base64 = base64.split(",")[1];
188  const binaryString = atob(base64);
189  const len = binaryString.length;
190  const bytes = new Uint8Array(new ArrayBuffer(len));
191  for (let i = 0; i < len; i++) bytes[i] = binaryString.charCodeAt(i);
192 
193  const f = new File(Paths.cache, filename);
194  f.create({ overwrite: true });
195  f.write(bytes);
196  return f.uri;
197}
198```
199