ContextQMD
Back to React Native Vision Camera

Nativeframerenderer View

docs/content/docs/nativeframerenderer-view.mdx

5.0.111.4 KB
Original Source

import { Tab, Tabs } from 'fumadocs-ui/components/tabs'

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

tsx
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:

tsx
function App() {
  const frameRenderer = useFrameRenderer()
  const frameOutput = useFrameOutput({
    onFrame(frame) {
      'worklet'
      // [!code ++]
      frameRenderer.renderFrame(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.