react-native-ml-text-overlay

Overlay layer for OCR / Vision results, complete with depth rendering, loading icons and touch actions for blocks. Resizable (within limits)

Used internally at Wail

Installation

yarn add react-native-ml-text-overlay

Usage

import MlTextOverlay from 'react-native-ml-text-overlay';

<MlTextOverlay
  limit={0}
  imageSource={image}
  padding={20}
  ocrResults={ocrResults}
  itemsDone={itemsDone}
/>;

Props

Name	Type	Required	default	comment
blockIcon	(x: { done: boolean, error:boolean }) => ReactChild	no	-
blockPadding	number	no	20	Padding around each overlay block
blockStyle	ViewStyle (RN)	no	-
depth	1 | 2 | 3	no	1	decide the depth (granularity of the overlay), 1 is bigger blocks,3 is smaller (each letter), note: if over 100 blocks gets rendered animations turn off
doneStyle	ViewStyle (RN)	no	-	style appending on blockStyle if index is contained in itemsDone
errorStyle	ViewStyle (RN)	no	-	style appending on blockStyle if index is contained in itemsError
hideDone	boolean	no	false	hide block if index is contained in itemsDone
imageSource	ImageStyle (RN)	yes	-	{uri:imguri} or imported image
imageStyle	ImageRequireSource | ImageURISource	yes	-
itemsDone	number[]	no	-	array of indexes for items somehow marked as done example [1,2,3]
itemsError	number[]	no	-	array of indexes for items somehow marked as erroneous example [1,2,3]
limit	number	no	-	set a render limit of blocks
ocrResults	MLTextOverlay[]	yes	-	the JSON object containing all coordinate data for rendering
onPress	(x: { block: GoogleMLText | Element | Line; index: number }) => void	no	-	on press Item, return type includes index and the block data
padding	number	no	0	padding around the root render

Sources

Any source is fine as long as it follows the interface for MLTextOverlay (see source)

primarly use for Google ML Kit text and RN implementations like react-native-mlkit-ocr

to convert other sources like google cloud vision ensure the format adheres to

bounding: {
  height: number
  left: number
  top: number
  width: number
}

use the converter

TODO

• [x] implement parser for Google ml kit
• [x] implement parser for Google Cloud ML
• [ ] implement block / paragraph parser for Cloud ML
• [ ] implement parser for AWS Rekognition
• [ ] implement parser for Azure Computer Vision

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT