Integrate Quick Scan
useQuickScan
Github Example
import { useEffect, useRef, useState, useCallback } from 'react'
import {
PassioSDK,
type FoodDetectionConfig,
type NutritionFacts,
type FoodDetectionEvent,
PassioFoodItem,
DetectedCandidate,
} from '@passiolife/nutritionai-react-native-sdk-v3'
/**
* Custom hook for handling quick food scanning using PassioSDK.
* It provides functions and state variables related to food detection and alternative food items.
*/
export const useQuickScan = () => {
// State variables
const [passioFoodItem, setPassioFoodItem] = useState<PassioFoodItem | null>(
null
)
const [alternative, setAlternativePassioIDAttributes] = useState<
DetectedCandidate[] | null | undefined
>(null)
const [loading, setLoading] = useState(true)
const passioFoodItemRef = useRef<PassioFoodItem | null>(null)
const [nutritionFacts, setNutritionFacts] = useState<
NutritionFacts | undefined
>(undefined)
// Function to clear the scanning results
const onClearResultPress = () => {
setLoading(true)
passioFoodItemRef.current = null
setPassioFoodItem(null)
setAlternativePassioIDAttributes(null)
}
useEffect(() => {
// Function to handle food detection events
const handleFoodDetection = async (detection: FoodDetectionEvent) => {
const { candidates, nutritionFacts } = detection
// If nutritionFacts are available, set them and return
if (
nutritionFacts !== undefined &&
nutritionFacts.servingSizeGram !== undefined
) {
setNutritionFacts(detection.nutritionFacts)
return
}
// If no candidates available, return
if (!candidates) {
return
}
let attributes: PassioFoodItem | null = null
// Determine the type of food detection and fetch attributes accordingly
if (candidates.barcodeCandidates?.[0]) {
const barcode = candidates.barcodeCandidates[0].barcode
attributes = await PassioSDK.fetchAttributesForBarcode(barcode)
} else if (candidates.packagedFoodCode?.[0]) {
const packagedFoodCode = candidates.packagedFoodCode[0]
attributes = await PassioSDK.fetchPassioIDAttributesForPackagedFood(
packagedFoodCode
)
} else if (candidates.detectedCandidates?.[0]) {
const passioID = candidates.detectedCandidates[0].passioID
attributes = await PassioSDK.getAttributesForPassioID(passioID)
}
// If attributes are null, return
if (attributes === null) {
return
}
// Check if the detected food is different from the previous one
if (attributes?.id !== passioFoodItemRef.current?.id) {
passioFoodItemRef.current = attributes
// Update state variables and fetch alternative food items
setPassioFoodItem((prev) => {
if (attributes?.id === prev?.id) {
return prev
} else {
setAlternativePassioIDAttributes(
candidates.detectedCandidates[0]?.alternatives
)
return attributes
}
})
setLoading(false)
}
}
// Configuration for food detection
const config: FoodDetectionConfig = {
detectBarcodes: true,
detectPackagedFood: true,
detectNutritionFacts: true,
}
// Start food detection and subscribe to events
const subscription = PassioSDK.startFoodDetection(
config,
handleFoodDetection
)
// Cleanup function to unsubscribe when the component unmounts
return () => subscription.remove()
}, []) // Empty dependency array to run the effect only once during component mount
// Function to handle changes in alternative food items
const onAlternativeFoodItemChange = useCallback(
async (attribute: DetectedCandidate) => {
const alternatePassioFoodItem = await PassioSDK.getAttributesForPassioID(
attribute.passioID
)
if (alternatePassioFoodItem) {
passioFoodItemRef.current = alternatePassioFoodItem
setPassioFoodItem(alternatePassioFoodItem)
}
},
[]
)
// Return the hook's public API
return {
loading,
passioFoodItem,
onAlternativeFoodItemChange,
onClearResultPress,
alternative,
nutritionFacts,
}
}
QuickScanningScreen
import {
ActivityIndicator,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native'
import {
DetectionCameraView,
PassioFoodItem,
} from '@passiolife/nutritionai-react-native-sdk-v3'
import { useQuickScan } from './useQuickScan'
import React from 'react'
import { QuickFoodResult } from './view/QuickFoodResult'
interface Props {
onClose: () => void
onFoodDetail: (passioFoodItem: PassioFoodItem) => void
}
export const QuickScanningScreen = ({ onClose, onFoodDetail }: Props) => {
const {
loading,
passioFoodItem,
onClearResultPress,
alternative,
onAlternativeFoodItemChange,
} = useQuickScan()
const styles = quickScanStyle()
return (
<View style={styles.blackBackgroundStyle}>
<DetectionCameraView style={styles.detectionCamera} />
{loading ? (
<View style={styles.loadingIndicator}>
<ActivityIndicator />
<Text>Scanning...</Text>
</View>
) : null}
{passioFoodItem !== null ? (
<QuickFoodResult
attribute={passioFoodItem}
onAlternativeFoodItemChange={onAlternativeFoodItemChange}
onClearResultPress={onClearResultPress}
alternativeAttributes={alternative ?? []}
onItemClick={onFoodDetail}
/>
) : null}
<View style={styles.closeButton}>
<TouchableOpacity onPress={onClose}>
<Text style={styles.text}>✕</Text>
</TouchableOpacity>
</View>
</View>
)
}
const quickScanStyle = () =>
StyleSheet.create({
detectionCamera: {
flex: 1,
width: '100%',
},
blackBackgroundStyle: {
backgroundColor: 'black',
width: '100%',
flex: 1,
flexDirection: 'column',
},
loadingIndicator: {
backgroundColor: 'white',
minHeight: 150,
borderTopRightRadius: 24,
alignItems: 'center',
justifyContent: 'center',
borderTopLeftRadius: 24,
position: 'absolute',
bottom: 0,
right: 0,
left: 0,
},
text: {
color: 'white',
fontSize: 30,
},
closeButton: {
position: 'absolute',
top: 45,
right: 25,
zIndex: 1000,
color: 'white',
},
})
QuickFoodResult
import React from 'react'
import { Pressable, StyleSheet, Text, View, Image } from 'react-native'
import {
IconSize,
PassioIconView,
type PassioFoodItem,
DetectedCandidate,
} from '@passiolife/nutritionai-react-native-sdk-v3'
import { AlternativeFood } from '../../../src/views/AlternativeFood'
export interface QuickFoodResultProps {
attribute: PassioFoodItem
alternativeAttributes?: DetectedCandidate[]
onAlternativeFoodItemChange?: (item: DetectedCandidate) => void
onClearResultPress?: () => void
onItemClick?: (passioFoodItem: PassioFoodItem) => void
}
export const QuickFoodResult = ({
attribute,
alternativeAttributes,
onAlternativeFoodItemChange,
onClearResultPress,
onItemClick,
}: QuickFoodResultProps) => {
const styles = quickFoodResultStyle()
return (
<Pressable
onPress={() => {
onItemClick?.(attribute)
}}
style={styles.itemContainer}
>
<View style={styles.foodResult}>
<View style={styles.itemIconContainer}>
<PassioIconView
style={styles.itemIcon}
config={{
passioID: attribute.iconId ?? attribute.id,
iconSize: IconSize.PX180,
}}
/>
</View>
<View>
<Text style={styles.itemFoodName}>{attribute.name}</Text>
<Text style={styles.itemFoodDetail}>
{attribute.amount?.weight?.value +
' ' +
attribute.amount?.weight?.unit}
</Text>
<Text style={styles.itemFoodDetail}>
{attribute.nutrients.calories?.value +
' ' +
attribute.nutrients?.calories?.unit}
</Text>
</View>
</View>
{alternativeAttributes && (
<AlternativeFood
detectedCandidates={alternativeAttributes}
onAlternativeFoodItemChange={onAlternativeFoodItemChange}
/>
)}
<Pressable style={styles.clearResult} onPress={onClearResultPress}>
<Image
source={require('../../assets/close.png')}
style={styles.close}
/>
</Pressable>
</Pressable>
)
}
const quickFoodResultStyle = () =>
StyleSheet.create({
itemContainer: {
position: 'absolute',
bottom: 0,
right: 0,
padding: 16,
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
backgroundColor: 'white',
minHeight: 150,
flex: 1,
marginVertical: 0,
left: 0,
},
foodResult: {
flexDirection: 'row',
alignItems: 'center',
},
close: {
width: 24,
height: 24,
tintColor: 'white',
},
itemFoodName: {
flex: 1,
textTransform: 'capitalize',
paddingHorizontal: 8,
fontSize: 16,
},
itemFoodDetail: {
flex: 1,
textTransform: 'capitalize',
marginHorizontal: 8,
fontSize: 12,
},
itemIcon: {
height: 60,
width: 60,
},
itemIconContainer: {
height: 60,
width: 60,
overflow: 'hidden',
borderRadius: 30,
},
clearResult: {
flexDirection: 'row',
backgroundColor: 'red',
borderRadius: 32,
alignItems: 'center',
alignSelf: 'center',
padding: 8,
marginVertical: 16,
},
})
Last updated