Skip to main content

Hybrid Views

A Hybrid View is just a Hybrid Object that can also be rendered. It has one additional class-member, view:

Camera.nitro.ts
export interface CameraProps
       extends HybridViewProps {
  enableFlash: boolean
}
export interface CameraMethods
       extends HybridViewMethods { }

export type CameraView =
  HybridView<CameraProps, CameraMethods>
HybridCamera.swift
class HybridCamera : HybridCameraSpec {
  var enableFlash: Bool = false

  var view: UIView {
    get {
      return CameraPreviewView()
    }
  }
}

Rendering Hybrid Views​

Unlike a Hybrid Object, Hybrid Views should not be created manually. Instead, you should use the getHostComponent(...) function to get a renderable version of your Hybrid View:

export const Camera = getHostComponent<CameraProps, CameraMethods>(
  'Camera',
  () => CameraViewConfig
)

This can then be rendered in React;

function App() {
  return <Camera />
}

Internally, the <Camera /> view will create the HybridCamera hybrid object - one hybrid object per view.

Accessing the underlying Hybrid Object​

To access the actual underlying object, you can use the hybridRef:

function App() {
  return (
    <Camera
      hybridRef={{
        f: (ref) => {
          console.log(ref.name) // <-- HybridCamera
          const image = ref.takePhoto()
        }
      }}
    />
  )
}

Full Guides​

Check out the View Components section for a full guide on Hybrid Views.