Once the SDK is ready, you can start food detection.


Android Platform: You need the user's permission to access the camera.

<uses-permission android:name="android.permission.CAMERA">

IOS Platform: Enter a value for NSCameraUsageDescription in your Info.plist so the camera may be utilized.

Import the SDK

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

To show the live camera preview, add the DetectionCameraView to your view

<DetectionCameraView style={{flex: 1, width: '100%'}} />

The SDK can detect 4 different categories: VISUAL, BARCODE, PACKAGED FOOD and NUTRITION LABEL

const config: FoodDetectionConfig = {
   * Detect barcodes on packaged food products. Results will be returned
   * as `BarcodeCandidates` in the `FoodCandidates` property of `FoodDetectionEvent`
  detectBarcodes: true,
   * Results will be returned as DetectedCandidate in the `FoodCandidates`and 
   * property of `FoodDetectionEvent`

  detectPackagedFood: true,
useEffect(() => {
  if (!isReady) {
  const subscription = PassioSDK.startFoodDetection(
    async (detection: FoodDetectionEvent) => {

      const { candidates, nutritionFacts } = detection

      if (candidates?.barcodeCandidates?.length) {
         // show barcode candidates to the user

      } else if (candidates?.packagedFoodCode?.length) {
        // show OCR candidates to the user

      } else if (candidates?.detectedCandidates?.length) {
        // show visually recognized candidates to the user

  // stop food detection when component unmounts
  return () => subscription.remove(); 

}, [isReady]);

Try to run the above code in component and Point the phone to the image below and see if you are getting the correct food in console log Got food detection event

If at any point you need help from the Passio team, please reach out to us at

Last updated