expo-camera
- React Native course
- Advanced
- Lesson 7/83
- 5 min
Learn camera access with expo-camera.
The expo-camera package
To use the phone's camera in React Native you install the expo-camera package. It supports both photo capture and video recording. With Expo you install it with npx expo install expo-camera. The package offers a consistent interface for both iOS and Android.
After installation you import two things: the Camera component (which shows the camera view on the screen) and the CameraType constants (for front/back camera selection). To show the camera you place a <Camera /> component inside a View; once permission is granted the image appears on the screen.
Import
From the expo-camera package you import the Camera component and the CameraType constants. The syntax: import { Camera, CameraType } from 'expo-camera';. The names in curly braces are named exports of the package.
These two pieces work together: Camera is the component showing the camera view and CameraType is the constant for front/back selection. Camera takes a prop: style. You set the camera's screen size through this prop. The camera gives no image until permission is granted; we cover permission in the next lesson.
Practice Import and add the camera
Complete the empty file. Import Camera and CameraType from expo-camera. Then return <Camera style={{{ flex: 1 }}} /> from the component.
Starter code
// import Camera and CameraType from expo-camera
export default function App() {
// return the camera
return null;
}Sample solution
import { Camera, CameraType } from 'expo-camera';
export default function App() {
return <Camera style={{ flex: 1 }} />;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does expo-camera provide?
- Only file storage
- Camera view and photo capture Correct answer
- Only location info
- Only network requests
Explanation: expo-camera provides camera view and photo capture.
2 Write the import statement
import { ____ } from 'expo-camera';import { Camera } from 'expo-camera';Explanation: The Camera component is imported with curly braces.
3 Match each part to its role
| Term | Meaning |
|---|---|
Camera |
Camera component |
CameraType |
Front/back constant |
expo-camera |
Package name |
style |
View size |