react-native support? about tesseract.js

[arheom]

+1 for react-native support.

[AlexisLeon]

Hi everyone, I'm currently working to add support for react native.
I already fixed the JavaScript workers issue and I'm working on how to implement the HTML Image API.

Will be very helpful to know what's the flow in loadImage for node and browser.

[MeKyleH]

Any update on the RN support?

[AlexisLeon]

@mikasjoman @alburdette619 Almost there..

• JS Worker

[alburdette619]

@jonathanpalma oh looks like they got iOS implementation in, that's what was holding me up. I'll take a further look asap.

[jeromewu]

@broros I tried to use webview and sadly there is a out of memory error... (just like in Cordova)

I think it is a dead end for using tesseract.js in webview, I would recommend to use the native one in Android or iOS, here is a library that leverages native tesseract-ocr in react-native: https://github.com/jonathanpalma/react-native-tesseract-ocr

[jonathanpalma]

I would like to know if somebody could help us to have a look at @daominhsangvn's fork and provide some feedback about it. @AlexisLeon @nikita-pankratov @sanchezzzhak @alburdette619 @mikasjoman @arheom @enapupe @rgoldiez @bijection @bartvanremortele

[jopicornell]

Hey @AlexisLeon, where is your code published? I'm interested in working on this allowing us to not depend on node/browser native apis without having to eject. Let's see if it's possible!

[bartvanremortele]

The packager goes out of memory when importing tesseract.js-core

[bartvanremortele]

So I ran some more tests. I bumped the memory limit of the packager by changing the following lines:

node "$THIS_DIR/../local-cli/cli.js" start "$@"

to

node --max_old_space_size=4096 "$THIS_DIR/../local-cli/cli.js" start "$@"

in file:

node_modules/react-native/packager/packager.sh

and

$NODE_BINARY "$REACT_NATIVE_DIR/local-cli/cli.js" bundle \
  --entry-file "$ENTRY_FILE" \
  --platform ios \
  --dev $DEV \
  --reset-cache \
  --bundle-output "$BUNDLE_FILE" \
  --assets-dest "$DEST"

to

$NODE_BINARY \
  --expose-gc \
  --max_old_space_size=4096 \
"$REACT_NATIVE_DIR/local-cli/cli.js" bundle \
  --entry-file "$ENTRY_FILE" \
  --platform ios \
  --dev $DEV \
  --reset-cache true \
  --bundle-output "$BUNDLE_FILE" \
  --assets-dest "$DEST"

in file:
node_modules/react-native/packager/react-native-xcode.sh

which resulted in a timeout:

I don't know that much about react-native but maybe there is a way to include Tesseract.js core like they do with other tesseract native wrappers and bypassing the packager.

https://github.com/jonathanpalma/react-native-tesseract-ocr

[bijection]

have you tried adjusting the timeout as the error suggests?

[enapupe]

Considering Tesseract.js currently requires node v6.8.0 or greater., I suppose there's no support for it on react native, since reactnative runs JavaScriptCore..
The question to ask: which APIs or features Tesseract.js depends on? if we are talking about some native node apis, there's probably polyfills avaialble...

[rgoldiez]

Anyone get this to work with React Native?

[enapupe]

So, I went through this a little bit more and aside from the location dependency, which is easy to workaround, tesseract heavily depends on workers (which I managed to polyfill) (https://www.w3.org/TR/workers/) and some Image api to get the binary image data - which seems impossible to do in react-native.

For the people interested in continuing this quest: there's currently 2 "drivers" implementations of this package: browser and node. Ideally you would start one from scratch, calling it react-native and linking it on package.json under react-native section (there's a similar thing going on with browser). The gotcha now is finding a way to load image binary data and forward it to tesseract.

[enapupe]

BTW. I tried to make it work by adapting the current browser implementation. But there's really no good starting point. Both implementation (node & browser) heavily use their own APIS which are NOT available in react-native context.

[mikasjoman]

@AlexisLeon keep us updated with the progress :) Looking forward to implement this in my RN app!

[alburdette619]

@AlexisLeon How's it going? Do you have anything published yet or need any help?

[sanchezzzhak]

can it help?
https://medium.com/@aakashns/using-core-node-js-modules-in-react-native-apps-64acd4d07140

[nikita-pankratov]

@AlexisLeon +1 looking forward to it. what is the status? do you need any help?

[AlexisLeon]

@nikita-pankratov I'll publish my code soon.
I implemented the Workers in RN via Native Modules, now I'm looking for a way to implement the Image API, but it's getting tough. Any ideas?

[maciejrrr]

@AlexisLeon Any updates on workers? Maybe you can find solution for Image here expo/browser-polyfill.

[devgunyogesh]

@AlexisLeon Any update if it supports React Native now?

[AlexisLeon]

@mradziwon @devgunyogesh Nope, still looking for Image api solution, Workers are native modules

[Talalisi]

@AlexisLeon did you find a solution for React Native support ?

[AlexisLeon]

@Talalisi no 😞
Sadly for us there is not support (yet) for the js Image API
To implement OCR I decided to send the image to an API (Node.js) and return the extracted text

[callmejm]

any update for this awesome library use in react-native ?

maybe use WebAssembly

[jeromewu]

I would like to close this issue for now as it is not possible for tesseract.js to support react-native now.

The key issue we faced is that react-native have a poor support for asm.js and no support for webassembly now, so it is impossible to use tesseract.js in react-native (of course tesseract.js works in WebView, but it is not "native").

Cross our finger and hope one day we can reopen this issue with more support from react-native.

@jeromewu do you have an example of how this should work with webView?

[wilson0x4d]

bummer.