// clone the project from the github
git clone https://github.com/saeedhassansolangi/rnmlkit
// move to the project directory
cd react-native-mlkit-tutorial
// install the project's necessary packages(dependencies and devDependepencies)
npm install
// run these two scripts in the two separate terminal side by side
npm start
npm run android- this is the root file of the Project, contains only Navigations
- this is the Initial Route or Home Screen of the App which contains three buttons
-
- Named :
-
-
Take Image:- takes image using the Camera
-
-
-
Select Image:- select image from the device's Gallery
-
-
-
Process Image:- it just takes the image either from the Gallery or Camera and will send it to the ProcessImageScreen and this file is responsible for Extracting the text from the Image
-
-
As I mentioned above, this file is responsible for Extracting Text from the Image and render desired output on this Screen.
-
It Basically, invoke the 'recognizeImage' function from the
src/mlkit/index.tsfile, takes its output and render it on the Screen.
- this file uses the
react-native's Core API namedNativeModulesand access it's ObjectTextRecognitionModulefor recognizing the Text from the Image.
import {NativeModules} from 'react-native';
const {TextRecognitionModule} = NativeModules;
/// ...other typescript code
export const recognizeImage = (url: string): Promise<Response> => {
return TextRecognitionModule.recognizeImage(url);
};- these three files are responsible for creating some Reusable Components, nothing special
- these two files are responsbile for creating the Stack Navigation .
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent