Summary - Camera
- React Native course
- Advanced
- Lesson 12/83
- 5 min
Combine expo-camera, takePictureAsync and flash to write a camera app.
Summary - Camera
In this group you learned to install the expo-camera package, ask for camera permission, take photos with takePictureAsync, switch the front/back camera and manage the flash mode. The core of a camera app is these five pieces.
In the summary we will combine these pieces in a single app: the permission flow, photo capture and camera switching. Together they form a real camera screen. Let us merge them now.
Practice Summary - Take a photo
Complete the takePhoto function. Call const photo = await cameraRef.current.takePictureAsync(); return the file path with return photo.uri. cameraRef is passed as a parameter.
Starter code
export async function takePhoto(cameraRef) {
// take a photo and return the uri
}Sample solution
const photo = await cameraRef.current.takePictureAsync();
return photo.uri;Practice Summary - Switch camera
Complete the empty toggleCamera function. Write setType(prev => prev === CameraType.back ? CameraType.front : CameraType.back). setType is passed as a parameter.
Starter code
import { CameraType } from 'expo-camera';
export function toggleCamera(setType) {
// switch the camera type
}Sample solution
setType(prev => prev === CameraType.back ? CameraType.front : CameraType.back);Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the permission function
const permission = await Camera.____();const permission = await Camera.requestCameraPermissionsAsync();Explanation: requestCameraPermissionsAsync asks for permission.
2 Match each flow part to its role
| Term | Meaning |
|---|---|
requestCameraPermissionsAsync |
Asks for permission |
takePictureAsync |
Takes a photo |
CameraType.front |
Front camera |
FlashMode.auto |
Automatic flash |