When users clicks a button, i am navigating user to new screen. In the new screen a camera opens by using react native vision camera. But when i am pressing back buttons "View Manager for tag" error is showing instead going back to previous screen.
const [hasPermission, setHasPermission] = useState(false);
const [barcodes, setBc] = useState([]);
const [isActive, setActive] = useState(true);
const devices = useCameraDevices();
const device = devices.back;
const navigation = useNavigation();
function scanBarcodes(frame, types, options) {
'worklet';
return __scanCodes(frame, types, options);
}
const frameProcessor = useFrameProcessor((frame) => {
'worklet';
const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE], { checkInverted: true });
runOnJS(setBc)(detectedBarcodes);
}, []);
useEffect(() => {
(async () => {
let granted = await Permission.checkPermission(PERMISSION_TYPE.camera);
if (!granted) {
granted = await Permission.requestPermission(PERMISSION_TYPE.camera);
}
setHasPermission(granted);
})();
}, []);
useEffect(() => {
const unsubscribe = navigation.addListener('beforeRemove', () => {
setHasPermission(false);
setBc([]);
setActive(false);
});
return unsubscribe;
}, [navigation]);
const onSuccess = (e) => {};
if (device != null && hasPermission) {
return (
<>
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={isActive}
frameProcessor={frameProcessor}
frameProcessorFps={5}
/>
{barcodes.map((barcode, idx) => (
<Text key={idx} style={styles.barcodeTextURL}>
{barcode.displayValue}
</Text>
))}
</>
);
} else {
return (
<View>
<Text>Need Permission</Text>
</View>
);
}
};
Any suggestion why this is happening?
Using - "react-native-reanimated": "2.3.0-alpha.3", "react-native-vision-camera": "2.13.0", "vision-camera-code-scanner": "^0.2.0"