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​