Nativepreview View - React Native Vision Camera

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

The <NativePreviewView /> is a native Nitro View that allows rendering the contents of a CameraPreviewOutput (see "Preview Output"):

tsx

function App() {
  const previewOutput = usePreviewOutput()

  return (
    <NativePreviewView
      style={StyleSheet.absoluteFill}
      previewOutput={previewOutput}
    />
  )
}

See PreviewViewProps for a full list of available props.

Accessing methods on the View

The <NativePreviewView /> provides methods for coordinate system conversions, and snapshot functionality under its ref:

tsx

function App() {
  const previewView = useRef<PreviewView>(null)

  return (
    <NativePreviewView
      style={StyleSheet.absoluteFill}
      previewOutput={previewOutput}
      // [!code ++:3]
      hybridRef={callback((r) => {
        previewView.current = r
      })}
    />
  )
}

For example, to convert a View point to Camera coordinates, you can use convertViewPointToCameraPoint(...):

tsx

function App() {
  const previewView = useRef<PreviewView>(null)

  // [!code ++:3]
  const onTap = ({ nativeEvent: { x, y } }) => {
    const cameraPoint = previewView.current.convertViewPointToCameraPoint({ x, y })
  }

  return (
    <NativePreviewView
      style={StyleSheet.absoluteFill}
      previewOutput={previewOutput}
      hybridRef={callback((r) => {
        previewView.current = r
      })}
    />
  )
}

See PreviewViewMethods for a full list of available methods.