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.

Start/Stop Events​

When starting/stopping the Camera session or when switching Camera devices (e.g. from front -> back), the Preview View will momentarily stop receiving frames and appears "frozen". To get notified about pauses in the preview view, use the onPreviewStarted and onPreviewStopped events:

<Camera
  {...props}
  onPreviewStarted={() => console.log('Preview started!')}
  onPreviewStopped={() => console.log('Preview stopped!')}
/>

Preview Frame Rate (FPS)​

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

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

See FPS for more information.

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. If a format is specified, the preview will try to match the video's resolution and aspect ratio if video is enabled, and photo's resolution and aspect ratio if photo is enabled.

<Camera
  {...props}
  format={bestFormatForPhoto}
  photo={true} // Preview will be in the photo resolution
/>

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​