Skip to main content

Preview

The Preview View

The <Camera> component renders a Preview view for the Camera. It can be styled like any other view, although in most cases you would want to just use style={{ flex: 1 }}.

Resize Mode

The Preview's scaling mode can be configured through the resizeMode property, which can be either "cover" (center-crop to fill the view) or "contain" (scale to fit inside the view, potentially with black spacings).

Disable Preview

If you don't need to display a Preview, you can set preview={false}. Since the Preview is a separate output stream, disabling it will save resources.

Skia Frame Processors will disable the native Preview to use a custom Skia Canvas instead.

FPS

The Preview view is running at the same frame rate as the Video stream, configured by the fps prop, or 30 FPS by default.

<Camera {...props} fps={60} />

Resolution

On iOS, the Video resolution also determines the Preview resolution, so if you Camera format has a low Video resolution, your Preview will also be in low resolution:

const lowResolutionFormat = useCameraFormat(device, [
{ videoResolution: { width: 640, height: 480 } },
])

On Android, the Preview will always be in full HD, or the Preview View's size, whichever is smaller.

Overlays and Masks

On Android, the Preview View supports two implementation modes which are controllable through the androidPreviewViewType prop:

  • "surface-view": Uses a SurfaceView for rendering. This is more efficient and supports HDR rendering, but doesn't support masks, transparency, rotations or clipping.
  • "texture-view": Uses a TextureView for rendering. This is less efficient and doesn't support HDR rendering, but supports masks, transparency, rotations and clipping.
<Camera {...props} androidPreviewViewType="texture-view" />

🚀 Next section: Taking Photos