Front/back camera

Learn to switch between front and back cameras.

Front and back camera

The phone has two cameras: front (selfie) and back. expo-camera makes this choice with the CameraType constant. CameraType.back is the back camera and CameraType.front is the front camera. They are passed to the Camera component as the type prop.

You keep the choice in state: const [type, setType] = React.useState(CameraType.back). When the button is pressed you switch with setType(type === CameraType.back ? CameraType.front : CameraType.back). This simple toggle pattern lets the user switch the camera with a single tap.

The toggle pattern

The camera switch button is bound to a toggle function. The function looks at the current type value and flips it. The syntax: setType(prev => prev === CameraType.back ? CameraType.front : CameraType.back). Here prev represents the previous value.

Using prev in state updates is the most robust method; because it always takes the current value on consecutive calls. You bind this function to the button's onPress. Each time the user taps the button, the camera switches between front and back; this is a standard feature of modern camera apps.

Exercise Add a camera switch button

Complete the empty toggleCamera function. Write setType(prev => prev === CameraType.back ? CameraType.front : CameraType.back). type and setType are passed as parameters.

Show example solution

setType(prev => prev === CameraType.back ? CameraType.front : CameraType.back);

Test yourself

Write the type prop

<Camera ____={type} style={{ flex: 1 }} />

Show answer

<Camera type={type} style={{ flex: 1 }} />

Match each constant to its meaning

CameraType.back

Back camera
CameraType.front

Front camera
type

Choice prop
setType

Updates the choice
What is used when writing a toggle with setType?
```
setType(?? => ?? === CameraType.back ? CameraType.front : CameraType.back)
```
- prev
- current
- next
- type
Show answer

prev — prev represents the current value.

Next lesson: Flash

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies