Skip to main content

Taking Photos

Camera Functions

The Camera provides certain functions which are available through a ref object:

function App() {
const camera = useRef<Camera>(null)
// ...

return (
<Camera
ref={camera}
{...cameraProps}
/>
)
}

To use these functions, you need to wait until the onInitialized event has been fired.

Taking Photos

To take a photo you first have to enable photo capture:

<Camera
{...props}
photo={true}
/>

Then, simply use the Camera's takePhoto(...) function:

const photo = await camera.current.takePhoto()

You can customize capture options such as automatic red-eye reduction, automatic image stabilization, enable flash, prioritize speed over quality, disable the shutter sound and more using the TakePhotoOptions parameter.

This function returns a PhotoFile which is stored in a temporary directory and can either be displayed using <Image> or <FastImage>, uploaded to a backend, or saved to the Camera Roll using react-native-cameraroll.

Flash

The takePhoto(...) function can be configured to enable the flash automatically (when the scene is dark), always or never, which will only be used for this specific capture request:

const photo = await camera.current.takePhoto({
flash: 'on' // 'auto' | 'off'
})

Note that flash is only available on camera devices where hasFlash is true; for example most front cameras don't have a flash.

Fast Capture

The takePhoto(...) function can be configured for faster capture at the cost of lower quality:

const photo = await camera.current.takePhoto({
qualityPrioritization: 'speed',
flash: 'off',
enableShutterSound: false
})

Saving the Photo to the Camera Roll

Since the Photo is stored as a temporary file, you need to save it to the Camera Roll to permanentely store it. You can use react-native-cameraroll for this:

const file = await camera.current.takePhoto()
await CameraRoll.save(`file://${file.path}`, {
type: 'photo',
})

Getting the Photo's data

To get the Photo's pixel data, you can use fetch(...) to read the local file as a Blob:

const file = await camera.current.takePhoto()
const result = await fetch(`file://${file.path}`)
const data = await result.blob();

🚀 Next section: Recording Videos