Follow

Does the Scandit React Native SDK support Expo?

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.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request