React native bindings for urovo scanners
- Works on both old
Legacy Native Modulesand newTurbo Native Modulesarchitectures - Uses latest urovo SDK
- Supports latest React Native version
v0.78+
This library tries to support as many RN versions as possible. For now the goal is to support the same versions as RN itself, you can learn more here
| RN-urovo version | RN version | Supports New Architecture |
|---|---|---|
| 1.0.0 | 0.78 | yes |
| 1.0.0 | 0.77 | yes |
| 1.0.0 | 0.76 | yes |
| 1.0.0 | 0.75 | no |
| 1.0.0 | 0.74 | no |
versions <= 0.73 are not supported
npm install react-native-urovoThere are 2 options to get started with
The useUrovo hook initializes the Urovo module for you by handling setup and cleanup, including the creation of an event listener. You only need to pass an onScan callback that handles the scan result:
import { useUrovo, type ScanResult } from 'react-native-urovo';
const [scanResult, setScanResult] = useState<ScanResult>();
useUrovo({ onScan: setScanResult });First, open or initialize the scanner:
import { closeScanner, openScanner } from 'react-native-urovo';
useEffect(() => {
openScanner();
return () => {
// Be sure to close scanner to avoid unexpected behaviour
closeScanner();
};
}, []);Next, add a listener for the UROVO_EVENTS.ON_SCAN event to handle scan results:
import Urovo, { type ScanResult, UROVO_EVENTS } from 'react-native-urovo';
useEffect(() => {
let eventListener: EmitterSubscription | undefined;
if (Urovo) {
// used only for type safety
const eventEmitter = new NativeEventEmitter(Urovo);
eventListener = eventEmitter.addListener(
UROVO_EVENTS.ON_SCAN,
(scan: ScanResult) => {}
);
}
return () => {
eventListener?.remove();
};
}, []);I recommend wrapping every method in trycatch. Learn more in Troubleshooting
Opens the scanner instance
Returns isOpenedSuccessfully: boolean
Closes the scanner
Retrieves a key-value pair object for the requested parameters
This is a low-level API provided by Urovo. In most cases, it is recommended to use the usePropertyID hook
import { PropertyID } from 'react-native-urovo';
const parameters = await getParameters([
PropertyID.QRCODE_ENABLE,
PropertyID.SEND_GOOD_READ_BEEP_ENABLE,
]);
const isQREnabled = parameters?.[PropertyID.QRCODE_ENABLE]; // 0 - disabled or 1 - enabledResponse
{
"2832": 1, // or 0
"6": 0 // this parameter supports: 0 - None, 1 - Short, 2 - Sharp
}Sets the value for a specified parameter
This is a low-level API provided by Urovo. In most cases, it is recommended to use the usePropertyID hook
import { setParameter, PropertyID } from 'react-native-urovo';
await setParameter({ [PropertyID.QRCODE_ENABLE]: 1 });Resets all barcode settings to their factory defaults.
import { resetScannerParameters } from 'react-native-urovo';
await resetScannerParameters();Urovo scanners have a set of parameters that you can set for better UX. A complete list of parameters you can find in the docs
Unfortunately Urovo does not come with a great descriptions, so you mostly have to figure it out yourself 🤷♂️
Also Urovo scanners come with built-in scanner app and settings. (You can find them in Settings -> Enterprise featured settings -> Scanner settings). You can test any parameter there and them find it in the docs.
The usePropertyID hook allows you to read and set parameter values (PropertyID) easily
import { PropertyID, usePropertyID } from 'react-native-urovo';
const [isQREnabled, setIsQREnabled] = usePropertyID(PropertyID.QRCODE_ENABLE);| key | value | description |
|---|---|---|
| value | string | The barcode value obtained using intent.getStringExtra (BARCODE_STRING_TAG) |
| symbology | Symbology | The barcode type. See the Symbology section for more details |
| type | number | A numeric representation of the barcode type. More details can be found here |
Example
{
"value": "barcode",
"symbology": "QRCODE",
"type": 31
}The Symbology enum contains all supported barcode types for the current Urovo scanner version
enum Symbology {
QRCODE = 'QRCODE',
// ...
}For additional details on supported symbologies, please refer to the official Urovo documentation
Stub error means that device does not support Urovo methods. If you're using Sentry, make sure to wrap every method in trycatch.
Example
// before
await setParameter({ [PropertyID.QRCODE_ENABLE]: 1 });
// after
try {
await setParameter({ [PropertyID.QRCODE_ENABLE]: 1 });
} catch (e) {
// you'll get stub error if current device does not support Urovo methods
console.error(e);
}Should you just ignore this error?
In most cases yes, you should. But sometimes you might want to handle in someho. For example show notification to user
If you have any feature requests or suggestions, feel free to open an issue or submit a pull request.
MIT