Overview
Yes, the Scandit SDK for React Native is compatible with the Expo framework. Follow the Project Setup steps below to get up and running.
⚠️ Expo Go is incompatible with the Scandit Data Capture SDK for React Native since access to Native Modules is required to scan barcodes using the device's camera. |
Project Setup
1. Review this Version Compatibility Table to verify which React Native version is compatible with your current Expo version.
2. If running an existing Expo project, ensure the installed Expo and React Native versions are compatible. You may also update package.json
to re-install.
npm i react-native@X.X.X
npm i expo@X.X.X
Otherwise, if starting a new Expo project, follow the Getting Started with React Native, which recommends Expo.
npx create-expo-app@latest
You may also migrate an existing React Native project to Expo using Expo Modules.
npx install-expo-modules@latest
3. Review the Version Compatibility Table below to verify your current React Native and Scandit Data Capture SDK versions are compatible.
[Version] React Native | [Min Version] Scandit SDK | |
New Architecture (default) | 0.76.0 | 6.28.2 or 7.0.1 |
0.73.6 | 6.24.0 | |
0.72.4 | 6.19.0 | |
New Architecture (opt-in only)* | 0.70.6 | 6.16 |
0.65.1 | 6.11 | |
0.64.2 | 6.9.0 | |
Legacy | 0.63.2 | 6.0.0 |
* Please note that New Architecture by either default or opt-in is supported starting in Scandit SDK versions 6.28.2 or 7.0.1.
4. Install the Scandit Data Capture SDK barcode, core, and any other packages as needed using versions compatible with your React Native and Expo environment.
npm i scandit-react-native-datacapture-core@X.X.X
npm i scandit-react-native-datacapture-barcode@X.X.X
5. The Scandit Data Capture SDK requires camera permission on the device to scan barcodes. This will require Native Modules (or Turbo Modules in the React Native New Architecture), which are incompatible with Expo Go.
Follow the Expo documentation to set up a Development Build. You may either follow the steps for Expo Application Service (EAS) or Watchman.
6. To access the camera, iOS devices require a "Privacy - Camera Usage Description" property in the Info.plist
. However, if your local development workflow uses Continuous Native Code Generation (CNG), Expo will restore the Info.plist
and the rest of the /ios
directory back to its default upon executing the npx expo prebuild --clean
command. This will remove iOS camera permissions again!
To fix this issue, add the following line to your app.json
to have CNG generate the "Privacy - Camera Usage Description" into your Info.plist
automatically.
{
"expo": {
"ios": {
"infoPlist": {
+ "NSCameraUsageDescription": "$(PRODUCT_NAME) is requesting to use the camera to scan barcodes."
}
}
}
}
7. To access the camera, Android devices require camera permission is requested before scanning is started. Please refer to our Samples for example code snippets showing how to request camera access permission on Android.
This will also show how to set the camera as the frame source for various capture modes.
8. You're now ready to implement your code and start scanning! You can skip the Installation steps in our documentation and follow the steps for any particular product:
You can also refer to our React Native samples on Github, which demonstrate best practices in JavaScript or TypeScript.
If you have any issues following the steps above, please Submit a Request for assistance.