-
-
Notifications
You must be signed in to change notification settings - Fork 22
Open
Description
The useFrameProcessor hook in useBarcodeScanner.ts is missing onBarcodeScanned from its dependency array.
This causes the frame processor to capture a stale onBarcodeScanned callback. When the consumer's callback changes (e.g. because its own dependencies changed), the frame processor continues to invoke the old reference.
Reproduction example
import { useCallback, useState } from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'
import { useBarcodeScanner } from '@mgcrea/vision-camera-barcode-scanner'
import { Camera, useCameraDevice } from 'react-native-vision-camera'
import { useRunOnJS } from 'react-native-worklets-core'
export const SelfScanner = () => {
const [count, setCount] = useState(0)
const device = useCameraDevice('back')
const onScanned = useCallback(
(code: string) => {
// BUG: `count` is always 0 here because the frame processor
// captured the initial `onBarcodeScanned` and never updates it.
console.log(`Count at scan time: ${count}`) // always logs 0
setCount(count + 1)
},
[count],
)
const onBarcodeScanned = useRunOnJS(
(barcodes) => {
if (barcodes[0]?.value) onScanned(barcodes[0].value)
},
[onScanned],
)
const { props: cameraProps } = useBarcodeScanner({
fps: 5,
barcodeTypes: ['ean-13'],
onBarcodeScanned,
})
if (!device) return null
return (
<View style={styles.container}>
{/* Count never goes above 1 because the stale callback always sees count=0 */}
<Text>Scanned: {count}</Text>
<Button title="Reset" onPress={() => setCount(0)} />
<Camera device={device} {...cameraProps} isActive style={styles.camera} />
</View>
)
}
const styles = StyleSheet.create({
camera: {
height: 500,
width: '100%',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels