<NativePreviewView />

Using the <NativePreviewView /> View

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

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:

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

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

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

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

  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.

On this page

Accessing methods on the View