<NativeFrameRendererView />

Using the <NativeFrameRendererView /> View

The <NativeFrameRendererView /> is a native Nitro View that allows rendering Frames using a FrameRenderer:

function App() {
  const frameRenderer = useFrameRenderer()

  return (
    <NativeFrameRendererView
      style={StyleSheet.absoluteFill}
      frameRenderer={frameRenderer}
    />
  )
}

Rendering a Frame

For example, you could simply render the output of a CameraFrameOutput:

function App() {
  const frameRenderer = useFrameRenderer()
  const frameOutput = useFrameOutput({
    onFrame(frame) {
      'worklet'
      frameRenderer.render(frame)
      frame.dispose()
    }
  })
  const camera = useCamera({
    isActive: true,
    device: 'back',
    outputs: [frameOutput]
  })

  return (
    <NativeFrameRendererView
      style={StyleSheet.absoluteFill}
      frameRenderer={frameRenderer}
    />
  )
}

Tip

See "The Frame Output" for more information about streaming Frames.

On this page

Rendering a Frame