This is a sample that shows how to implement barcode scanning in React Native using Dynamsoft Barcode Reader SDK.
To learn more about Dynamsoft Barcode Reader, please visit http://www.dynamsoft.com/Products/Dynamic-Barcode-Reader.aspx.
You can request for a free trial license online. Get a trial license >
Without a valid license, the SDK can work but will not return a full result.
Node, Python2, JDK, Watchman, Xcode and Android Studio.
(Windows: The version of Node must be greater than or equal to 10 and less than or equal to 12.11, the version of Python must be 2.x (does not support 3.x), and the version of JDK must be 1.8)
Run npm install or yarn (npm install -g yarn)
from the Example directory first, then pod install
in the react-native-dbr/Libraries.
And make sure Your Project Target -> Build Settings -> Search Paths -> Frameworks Search Paths
and Pods-BarcodeReaderManager.debug(release).xcconfig
:
Frameworks Search Paths = "${PODS_ROOT}/DynamsoftBarcodeReader"
HEADER_SEARCH_PATHS = $(inherited) "${PODS_ROOT}/DynamsoftBarcodeReader/DynamsoftBarcodeReader.framework/Headers"
OTHER_LDFLAGS = $(inherited) -ObjC -framework "DynamsoftBarcodeReader"
Then react-native run-ios
.
npm install or yarn (npm install -g yarn)
react-native run-android
-
Create a new React Native project if you donnot have one.
react-native init NewProject
-
Add the local module to dependencies in
package.json
."dependencies": { "react": "16.9.0", "react-native": "^0.61.1", "react-native-dbr": "^8.0.1" },
-
On
android/settings.gradle
.include ':react-native-dbr' project(':react-native-dbr').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dbr/androidLib')
-
Add
':react-native-dbr'
dependency inandroid/app/build.gradle
.dependencies { implementation project(path: ':react-native-dbr') }
-
On the MainApplication of your Android project add the import of BarcodeReaderPackage line to:
import com.demo.barcodescanner.BarcodeReaderPackage; ... @Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); packages.add(new BarcodeReaderPackage()); // add BarcodeReaderPackage here!! return packages; } ...
-
Use the module in
App.js
.import {NativeModules} from 'react-native'; const BarcodeReaderManager = NativeModules.BarcodeReaderManager; //android BarcodeReaderManager.readBarcode('your license here',events => { this.setState({result: events}); },err => { alert(err); } );
-
Create a new React Native project if you donnot have one.
react-native init NewProject
-
Add the local module to dependencies in
NewProject/package.json
."dependencies": { "react": "16.9.0", "react-native": "^0.61.1", "react-native-dbr": "^8.0.1" }
-
Remove
node_moudules
and install.sudo rm -rf node_moudules npm install or yarn
-
Add
BarcodeReaderManager.xcodeproj
to your project libraries. And make surePods/Target Support Files/Pods-BarcodeReaderManager.debug.xcconfig
:
FRAMEWORK_SEARCH_PATHS = "${PODS_ROOT}/DynamsoftBarcodeReader"
HEADER_SEARCH_PATHS = "${PODS_ROOT}/DynamsoftBarcodeReader/DynamsoftBarcodeReader.framework/Headers"
LIBRARY_SEARCH_PATHS = "${PODS_ROOT}/DynamsoftBarcodeReader"
OTHER_LDFLAGS = -framework "DynamsoftBarcodeReader"
- In your NewProject:
Project -> Build Settings -> FRAMEWORK_SEARCH_PATHS = `$(PROJECT_DIR)/../Libraries`
HEADER_SEARCH_PATHS = `$(PROJECT_DIR)/../Libraries`
-
Modify the module in
App.js
(different from android).import {NativeModules} from 'react-native'; const BarcodeReaderManager = NativeModules.BarcodeReaderManager; //ios BarcodeReaderManager.readBarcode('your license here').then((msg) =>{ this.setState({result: msg}); }).catch((err) => { console.log(err); });
-
To achieve navigation from react-native to viewController, in
AppDelegate.h
andAppDelegate.m
, add the following code:... @property (nonatomic, strong) UIWindow *window; @property (nonatomic, strong) UINavigationController *nav; @property (nonatomic, strong) RCTRootView *rootView; @property (nonatomic, strong) UIViewController *rootViewController; ... ```AppDelegate.m: #import "../../../ios/BarcodeReaderManagerViewController.h" #import "../../../ios/DbrManager.h" - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // self.window.rootViewController = rootViewController; _nav = [[UINavigationController alloc] initWithRootViewController:_rootViewController]; self.window.rootViewController = _nav; _nav.navigationBarHidden = YES; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(doNotification:) name:@"readBarcode" object:nil]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(backToJs:) name:@"backToJs" object:nil]; [self.window makeKeyAndVisible]; return YES; } -(void)doNotification:(NSNotification *)notification{ BarcodeReaderManagerViewController* dbrMangerController = [[BarcodeReaderManagerViewController alloc] init]; dbrMangerController.dbrManager = [[DbrManager alloc] initWithLicense:notification.userInfo[@"inputValue"]]; [self.nav pushViewController:dbrMangerController animated:YES]; } -(void)backToJs:(NSNotification *)notification{ [self.nav popToViewController:self.rootViewController animated:YES]; }