@ivankozlo/react-native-firebase-mlkit
v0.6.8
Published
Text Recognition in image for react native using firebase ML Kit
Downloads
4
Readme
react-native-firebase-mlkit
React Native wrapper for functionality of https://developers.google.com/ml-kit/
Getting started
$ npm install react-native-firebase-mlkit --save
Compatibility
As of the moment, this wrapper of firebase Ml Kit supports Android and iOS.
Mostly automatic installation
$ react-native link react-native-firebase-mlkit
Don't forget to ...
- add google-services.json to the appropriate folder (/android/app/) (Android only)
- add GoogleService-Info.plist to the appropriate folder (/ios/) (iOS only)
- install CocoaPods in your react-native project and add the following line to your Podfile then run
pod install
(iOS only)pod 'Firebase/Core' pod 'Firebase/MLVision' pod 'Firebase/MLVisionTextModel' pod 'Firebase/MLVisionBarcodeModel'
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-firebase-mlkit
and addRNMlKit.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNMlKit.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
Error: MLVisionTextModel duplicate symbols with React Native
Solved enabling the dead code stripping in xcode for debug.
You can enable it in Target > Build Settings > search for "Dead code stripping".
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.mlkit.RNMlKitPackage;
to the imports at the top of the file - Add
new RNMlKitPackage()
to the list returned by thegetPackages()
method
Append the following lines to
android/settings.gradle
:include ':react-native-firebase-mlkit' project(':react-native-firebase-mlkit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase-mlkit/android')
Insert the following lines inside the dependencies block in
android/app/build.gradle
:... dependencies { implementation 'com.google.firebase:firebase-core:16.0.1' implementation 'com.google.firebase:firebase-ml-vision:17.0.0' implementation (project(':react-native-firebase-mlkit')) { exclude group: 'com.google.firebase' } } // Place this line at the end of file apply plugin: 'com.google.gms.google-services' // Work around for onesignal-gradle-plugin compatibility com.google.gms.googleservices.GoogleServicesPlugin.config.disableVersionCheck = true
Insert the following lines inside the dependencies block in
android/build.gradle
:buildscript { repositories { google() ... } dependencies { classpath 'com.android.tools.build:gradle:3.0.1' classpath 'com.google.gms:google-services:4.0.2' // google-services plugin } }
Usage (Example using react-native-camera)
import RNMlKit from 'react-native-firebase-mlkit';
export class textRecognition extends Component {
...
async takePicture() {
if (this.camera) {
const options = { quality: 0.5, base64: true, skipProcessing: true, forceUpOrientation: true };
const data = await this.camera.takePictureAsync(options);
// for on-device (Supports Android and iOS)
const deviceTextRecognition = await RNMlKit.deviceTextRecognition(data.uri);
console.log('Text Recognition On-Device', deviceTextRecognition);
// for cloud (At the moment supports only Android)
const cloudTextRecognition = await RNMlKit.cloudTextRecognition(data.uri);
console.log('Text Recognition Cloud', cloudTextRecognition);
}
};
...
}
- For private use, I changed the firebase mlkit to google ml kit. Also, changed many parts of the code, so, if you want to use original version, please use version 0.6.3 that is the summary podspec file issue fixed. Thank you!