Installation Guide for barKoder's React Barcode Reader SDK
This is a guide for the barKoder React Native Plugin. Follow these simple steps below to use the barkoder-react-native package in your React project:
1. Prepare environment #
Install the dependencies and setup your environment
2. Add our barkoder-react-native package #
To add the barkoder-react-native package to your project, you have two options. You can either use the barkoder-react-native package from npm or from a local path.
To use the package from npm run this command:
yarn add barkoder-react-native
if you are using YARN in your project or
npm install barkoder-react-native
if you are using NPM in your project.
If you’d rather use a local package, download it directly from the barKoder Developer Portal. After extracting the archive, add it to your project by specifying the path to the package using:
yarn add <path to barkoder-react-native package>
If you are using YARN in your project or
npm install <path to barkoder-react-native package>
If you are using NPM in your project.
If you encounter issues on iOS, try reinstalling the dependencies:Navigate to the ios
folder of your project and run:
cd ios
pod install
3. Import package #
Import the barkoder-react-native package in your project with:
import { Barkoder, BarkoderView } from 'barkoder-react-native';
4. BarkoderView #
At this stage, the barkoder-react-native package is successfully installed and imported into your project.The next step is to integrate the BarkoderView
component into your layout, making sure to:
- Set the licenseKey parameter.
- Provide the onBarkoderViewCreated callback to handle initialization events.
<SafeAreaView style={styles.container}>
...
<BarkoderView
style={styles.barkoderView}
licenseKey="KEY"
> onBarkoderViewCreated(barkoder)} />
...
The license key is an alphanumeric string required to activate the SDK. Refer to Section 7 for detailed instructions on obtaining a valid license.
5. Ready to Scan Event #
Inside onBarkoderViewCreated callback function, the SDK is fully initialized and ready for configuration or to start the scanning process
async function onBarkoderViewCreated(_barkoder: Barkoder) {
barkoder.setBarcodeTypeEnabled(Barkoder.BarcodeType.qr, true);
barkoder.setRegionOfInterestVisible(true);
...
setBarkoder(barkoder);
}
function scanPressed() {
barkoder.startScanning((result) {
// The result from successful scan is received here
});
}
6. Camera permissions #
The SDK requires camera permission to enable barcode scanning features.
- Android: The required permission is automatically declared in the package manifest. No additional configuration is needed.
- iOS: You must manually specify the camera permission in your project’s Info.plist file by adding a NSCameraUsageDescription key with a description of why the camera is needed.
<key>NSCameraUsageDescription</key>
<string>Camera permission</string>