Components

The React Native SDK exports two native UI components.

DetectionCameraView

A native camera preview surface used in scanning flows (barcode scanning, live detection).

Import

import { DetectionCameraView } from '@passiolife/nutritionai-react-native-sdk-v3'

Props

Extends standard ViewProps (accepts style, testID, etc.).

Usage

<DetectionCameraView style={{ flex: 1 }} />

Place it in your component tree wherever you need a camera preview. The SDK manages the underlying AVCaptureSession (iOS) and CameraX (Android) lifecycle automatically.

DetectionCameraView requires camera permission. Call PassioSDK.requestCameraAuthorization() before rendering.

With Barcode Scanning

import { useEffect } from 'react'
import {
  PassioSDK,
  DetectionCameraView,
} from '@passiolife/nutritionai-react-native-sdk-v3'

function BarcodeScanner() {
  useEffect(() => {
    const subscription = PassioSDK.startBarcodeScanning((event) => {
      const barcodes = event.barcodeCandidates ?? []
      barcodes.forEach(({ barcode }) => {
        console.log('Scanned barcode:', barcode)
      })
    })
    return () => subscription.remove()
  }, [])

  return <DetectionCameraView style={{ flex: 1 }} />
}

---

PassioIconView

Renders food icon images associated with Passio item IDs. The component fetches and caches icons from the Passio icon service.

Import

import { PassioIconView, IconSize } from '@passiolife/nutritionai-react-native-sdk-v3'

Props

Prop	Type	Description
config.passioID	PassioID	The Passio ID to display an icon for
config.iconSize	IconSize	Icon resolution: PX90, PX180, or PX360

Also accepts standard ViewProps.

Usage

<PassioIconView
  style={{ width: 60, height: 60 }}
  config={{
    passioID: foodItem.iconId,
    iconSize: IconSize.PX360,
  }}
/>

Circular Icon Example

<View style={{ width: 60, height: 60, borderRadius: 30, overflow: 'hidden' }}>
  <PassioIconView
    style={{ width: 60, height: 60 }}
    config={{
      passioID: ingredient.iconId,
      iconSize: IconSize.PX180,
    }}
  />
</View>