Skip to main content

Hybrid Views

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

CameraView.nitro.ts
@iOS(...)
@Android(...)
export declare class CameraView extends HybridView {
  enableFlash: boolean
  takePhoto(): Promise<Image>
}
export * from '#nitro/CameraView'
HybridCameraView.swift
class HybridCameraView : HybridCameraViewSpec {
  let view = CameraPreviewView()
  var enableFlash: Bool = false
  func takePhoto() -> any Promise<HybridImageSpec> {
    ...
  }
}

Rendering Hybrid Views​

Nitrogen generates a React Native Fabric component for each Hybrid View. Fabric creates its native instance; the spec does not expose a public JavaScript constructor:

import { CameraViewComponent } from './CameraView.nitro'

function App() {
  return <CameraViewComponent />
}

Internally, the <CameraViewComponent /> view will create the HybridCameraView hybrid object and mount its .view - one hybrid object per view.

Accessing the underlying Hybrid Object​

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

function App() {
  return (
    <CameraViewComponent
      hybridRef={(ref) => {
        console.log(ref.toString()) // <-- [HybridObject CameraView]
        ref.takePhoto()
      }}
    />
  )
}

Full Guides​

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