Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zsajjad/react-native-text-detector
Text Detector from image for react native using firebase MLKit on android and Tesseract on iOS
https://github.com/zsajjad/react-native-text-detector
core-ml firebase-mlkit react-native tesseract-ios tesseract-ocr text-detection vision
Last synced: about 2 months ago
JSON representation
Text Detector from image for react native using firebase MLKit on android and Tesseract on iOS
- Host: GitHub
- URL: https://github.com/zsajjad/react-native-text-detector
- Owner: zsajjad
- License: mit
- Created: 2018-07-11T07:15:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-11-26T13:13:40.000Z (about 5 years ago)
- Last Synced: 2024-11-20T05:43:00.437Z (2 months ago)
- Topics: core-ml, firebase-mlkit, react-native, tesseract-ios, tesseract-ocr, text-detection, vision
- Language: Java
- Homepage:
- Size: 230 KB
- Stars: 221
- Watchers: 13
- Forks: 60
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Text Detector
[](https://www.npmjs.com/package/react-native-text-detector)
## See it in action
Checkout these blog for
- [Business Card Reading App](https://heartbeat.fritz.ai/building-text-detection-apps-for-ios-and-android-using-react-native-42fe3c7e339)
- [Delta ML - Comparison between different OCR SDKs (iOS)](https://heartbeat.fritz.ai/comparing-on-device-text-recognition-ocr-sdks-24f8a0423461)
- [Choose the Right On-Device Text Recognition (OCR) SDK on Android Using DeltaML](https://heartbeat.fritz.ai/https-heartbeat-fritz-ai-choose-the-right-on-device-text-recognition-sdk-on-android-using-deltaml-9b4b3e409b6e)
for example of this package.
## Different libraries
Default branch uses Tesseract on iOS and Firebase ML Kit on android. Beside that we have 2 branches
- [Firebase](https://github.com/zsajjad/react-native-text-detector/tree/firebase) it uses firebase on both platforms
- [Tesseract OCR](https://github.com/zsajjad/react-native-text-detector/tree/tesseract) it uses tesseract on both platforms
For deciding between which one is better check this blog on [Hearbeat by Fritz.ai](https://heartbeat.fritz.ai/comparing-on-device-text-recognition-ocr-sdks-24f8a0423461)
## Getting started
`$ npm install react-native-text-detector --save` or `yarn add react-native-text-detector`
### Manual installation
#### iOS
##### Attach Tesseract Languages you want to use in your app
Import your tessdata folder (you can download one for your language from [Google's Repo](https://code.google.com/p/tesseract-ocr/downloads/list) OR if that gives an error use [THIS REPO](https://github.com/tesseract-ocr/tessdata/tree/bf82613055ebc6e63d9e3b438a5c234bfd638c93) as referenced on [stack overflow as solution](https://stackoverflow.com/questions/41131083/tesseract-traineddata-not-working-in-swift-3-0-project-using-version-4-0/41168236#41168236) into the root of your project AS A REFERENCED FOLDER (see below). It contains the Tesseract trained data files. You can add your own trained data files here too.
NOTE: This library currently requires the tessdata folder to be linked as a referenced folder instead of a symbolic group. If Tesseract can't find a language file in your own project, it's probably because you created the tessdata folder as a symbolic group instead of a referenced folder. It should look like this if you did it correctly:
Note how the tessdata folder has a blue icon, indicating it was imported as a referenced folder instead of a symbolic group.
##### Also add `-lstdc++` if not already present
##### Using Pods (Recommended)
1. Add following in `ios/Podfile`
```ruby
pod 'RNTextDetector', path: '../node_modules/react-native-text-detector/ios'
```
2. Run following from project's root directory
```bash
cd ios && pod install
```
3. Use `.xcworkspace` to run your app
##### Direct Linking
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-text-detector` and add `RNTextDetector.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNTextDetector.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<
#### Android
This package uses Firebase ML Kit for text recognition on android please make sure you have integrated firebase in your app before started integration of this package. [Here is the guide](https://firebase.google.com/docs/android/setup) for Firebase integration.
1. Open up `android/app/src/main/java/[...]/MainApplication.java`
- Add `import com.fetchsky.RNTextDetector.RNTextDetectorPackage;` to the imports at the top of the file
- Add `new RNTextDetectorPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
```
include ':react-native-text-detector'
project(':react-native-text-detector').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-text-detector/android')
```
3. 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-text-detector')) {
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
```
4. 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.1' // google-services plugin
}
}
```
## Usage
```javascript
/**
*
* This Example uses react-native-camera for getting image
*
*/
import RNTextDetector from "react-native-text-detector";
export class TextDetectionComponent extends PureComponent {
...
detectText = async () => {
try {
const options = {
quality: 0.8,
base64: true,
skipProcessing: true,
};
const { uri } = await this.camera.takePictureAsync(options);
const visionResp = await RNTextDetector.detectFromUri(uri);
console.log('visionResp', visionResp);
} catch (e) {
console.warn(e);
}
};
...
}
```