Taking pictures

Learn to take pictures with takePictureAsync.

takePictureAsync

The Camera component has a ref. You call the photo capture function through this ref: cameraRef.current.takePictureAsync(). The function returns an asynchronous object; the uri field carries the file path of the captured photo.

To create a ref you use React.useRef(null); you attach it as a <Camera ref={cameraRef} /> prop. You bind the capture function to a button's onPress. Example: const photo = await cameraRef.current.takePictureAsync(). You can then save the returned object's uri property to the gallery or show it on the screen.

Attaching a ref

To attach the ref to the camera you use the ref prop. Example: const cameraRef = React.useRef(null) and <Camera ref={cameraRef} style={{{ flex: 1 }}} />. After attaching, cameraRef.current points to the camera component; you can call functions like takePictureAsync on it.

If the ref is not attached, cameraRef.current stays null; the function call errors. So always attach the ref to the camera. When binding the capture function to a button you write onPress={takePhoto}; the takePhoto function uses the ref.

Exercise Take a photo and log the uri

Complete the takePhoto function. Call const photo = await cameraRef.current.takePictureAsync(); log the file path with console.log(photo.uri). cameraRef is already defined.

Show example solution

const photo = await cameraRef.current.takePictureAsync();
console.log(photo.uri);

Test yourself

Match each part to its role

useRef

Creates a ref
cameraRef.current

Access through ref
takePictureAsync

Takes a photo
uri

File path
How is takePictureAsync called?
```
const photo = await cameraRef.current.??()
```
- cameraRef.takePictureAsync()
- Camera.takePictureAsync()
- takePicture(cameraRef)
- cameraRef.current.takePictureAsync()
Show answer

cameraRef.current.takePictureAsync() — It is called through the ref's current property.

Ref creation

const cameraRef = React.____(null);

Show answer

const cameraRef = React.useRef(null);

Next lesson: Front/back camera

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies