expo
[SDK50] [expo-camera/next] Barcode Scanner not working on IOS 17.2.1
Minimal reproducible example
https://gist.github.com/Ganesh1991/4fd95971e03d434065e934e672518e04
Summary
Using expo-camera/next for scanning barcode and qrcodes. On Android it is working correctly but IOS 17.2.1 it does not work. As suggested in https://github.com/expo/expo/issues/26687 updated the package but still nothing happens on ios.
Please find the source code below https://gist.github.com/Ganesh1991/4fd95971e03d434065e934e672518e04
Environment
"@expo/metro-runtime": "^3.1.1", "@expo/vector-icons": "^14.0.0", "@react-native-async-storage/async-storage": "^1.21.0", "@react-native-clipboard/clipboard": "^1.13.2", "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.17", "@react-navigation/stack": "^6.3.20", "@rneui/base": "^4.0.0-rc.7", "@rneui/themed": "^4.0.0-rc.8", "dom-to-image": "^2.6.0", "expo": "~50.0.2", "expo-barcode-scanner": "~12.9.2", "expo-camera": "~14.0.3", "expo-image-picker": "~14.7.1", "expo-media-library": "~15.9.1", "expo-status-bar": "~1.11.1", "install": "^0.13.0", "npm": "^10.3.0", "react": "18.2.0", "react-hook-form": "^7.49.3", "react-native": "0.73.2", "react-native-device-info": "^10.12.0", "react-native-dropdown-picker": "^5.4.6", "react-native-element-dropdown": "^2.10.1", "react-native-elements": "^3.4.3", "react-native-gesture-handler": "~2.14.0", "react-native-input-select": "^1.3.3", "react-native-iphone-x-helper": "^1.3.1", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-linear-gradient": "^2.8.3", "react-native-paper": "^5.12.2", "react-native-picker-select": "^9.0.0", "react-native-reanimated": "^3.6.1", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", "react-native-status-bar-height": "^2.6.0", "react-native-svg": "^14.1.0", "react-native-vector-icons": "^10.0.3", "react-native-view-shot": "3.8.0", "react-native-web": "^0.18.12"
@Ganesh1991 - expo go did not receive this fix yet. You can use a development client.
I'm trying to migrate to expo-camera/next barcode scanner ... I am using a development client and scanning was working perfectly with expo-camera, but with expo-camera/next barcode scanning does not work at all for me on android or iOS - never triggers onBarcodeScanned.
Is there a minimal scanner example for expo-camera/next? because I feel like it must be some small simple change that i've missed ...
ok, found the answer to my problem ... for anyone upgrading, watch out for casing on the prop names!
There's an odd mix of casing of the "c" in barcode throughout the documentation, to the point that the example here uses upper case but the heading uses lower case:
In expo-camera/next it the casing of the c in barcode has changed from upper to lower in the props, so they are now barcodeScannerSettings and onBarcodeScanned.
FWIW I think this is a good change, but it could do with being more consistent (there still seem to be numerous cases e.g. in the types where that letter is still upper case).
@steveliles sorry but your solution is not working for me.
With the expo-camera/next the expo-barcode-scanner is already included and i don't even have it as dependency anymore.
Also it's not possible to import Camera as a component from expo-camera/next. Using expo-camera/next u need to use the CameraView component.
For me the solution was to update expo packages, in detail what i did
Updated dependencies
- "expo": "^50.0.2",
- "expo-camera": "~14.0.1",
+ "expo": "^50.0.6",
+ "expo-camera": "~14.0.4",
An Implementation example
import React, {useState} from 'react';
import {CameraView, useCameraPermissions} from 'expo-camera/next';
import * as Device from 'expo-device';
import {BarCodeScanningResult} from 'expo-camera';
... // more imports are skipped
function QrCodeScreen({
navigation,
}: NativeStackScreenProps<AuthStackParams, 'QrCode'>) {
const [permission, requestPermission] = useCameraPermissions();
const [scanned, setScanned] = useState(false);
const handleBarCodeScanned = ({data}: BarCodeScanningResult) => {
setScanned(true);
navigation.navigate('Organization', {barCodeData: data});
};
if (!permission) {
requestPermission();
return (
<MainLayout>
<View className="flex flex-1 justify-center self-center">
<Text className="w-full">Requesting for camera permission</Text>
</View>
</MainLayout>
);
}
if (!permission.granted) {
return (
<MainLayout>
<View className="flex flex-1 justify-center self-center">
<Text className="w-full">No access to camera granted</Text>
</View>
</MainLayout>
);
}
return (
<View className="flex flex-1">
{Device.isDevice ? (
<CameraView
onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
barcodeScannerSettings={{
barCodeTypes: ['qr', 'pdf417'],
}}
style={StyleSheet.absoluteFillObject}
/>
) : (
<Text>Camera is not supported in simulator</Text>
)}
<View
className="bg-white p-m w-full absolute bottom-0"
// for some reason the tailwind classes for bottom-0 not working correctly
// eslint-disable-next-line react-native/no-inline-styles
style={{bottom: 0}}>
<Button title="Go Back" onPressOut={navigation.goBack} />
</View>
</View>
);
}
yeah i never had expo-barcode-scanner in my project, i started out at expo 49 using barcode support baked into expo-camera. my point was just if anyone was upgrading from barcode scanning with expo-camera to barcode scanning with expo-camera/next, it isn't just changing from Camera to CameraView, its also that the prop name casing has changed (very subtle and easy to miss) and the docs are also a bit confused about it.
Useful to have an example for folks that stumble in here, nice one 👍
Hi everyone - apologies for all the confusion here. #26900 will bring consistency to the prop name casing and fixes the examples in the doc comments. The issue of the scanner not starting was also resolved in #26704