How can I import OpenCV library to React-Native project - react-native

Question

I tried to import OpenCV via native code but that not worked and I also tried react-native-opencv
library but that library doesn't contain all OpenCV methods.
How can I achieve to use OpenCV in my react-native project?
Thanks in advance.

Answer 1

I have been struggling with OpenCV in react-native for a week now and finally got it working. There is this very good article https://brainhub.eu/blog/opencv-react-native-image-processing/ together with this repo https://github.com/brainhubeu/react-native-opencv-tutorial which describes in details on how to do get it running. However I could not make the code from this repo working by following the steps described or following any other tutorial/video I could find. So in case if anyone is facing the same problem you can try this steps that made the app from the mentioned repo working with OpenCV v4.5 on my Android 10 device.
Open terminal and initialize new React-Native project
npx react-native init NAME_OF_YOUR_PROJECT
Navigate to path /main
cd NAME_OF_YOUR_PROJECT/android/app/src/main
Create new folder named jniLibs
mkdir jniLibs
Download and extract latest OpenCV for Android (tested with OpenCV 4.5) from https://opencv.org/releases/
Rename the "sdk" folder in the extracted folder (OpenCV-android-sdk) to "opencv"
Copy content from extracted folder (OpenCV-android-sdk/opencv/native/libs/) to newly created ./jniLibs
cp -r /PATH_TO_EXTRACTED_OPENCV_FOLDER/OpenCV-android-sdk/opencv/native/libs/ ./jniLibs
Open Android Studio and open Android folder of your projects dir
File -> Open -> select */NAME_OF_YOUR_PROJECT/android
Import OpenCV to your project
File -> New -> Import module -> select the folder you renamed to opencv
(IMPORTANT! Some tutorials say to select the "java" folder inside this folder - don't do that)
Under Gradle Scripts: open build.gradle(:opencv) and build.gradle(YOUR_PROJECT_NAME)
Change both to matching numbers - in my case:
minSdkVersion = 21
compileSdkVersion = 29
Add opencv to projects dependencies
File -> Project Structure -> Dependencies -> select app and press the "+" sign (located "underneath All dependencies") -> check the checkbox next to opencv -> press OK
In build.gradle(YOUR_APP_NAME) change version of gradle to 4.1.0
dependencies {
classpath("com.android.tools.build:gradle:4.1.0")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
Now open build.gradle(Project: NAME_OF_YOUR_PROJECT .app) and change java version in compile options and add packagin option with some pickfirst option. Also enable multidex option and if you wish to use react-native-camera add the missing dimension strategy. Should look something like this:
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
packagingOptions {
pickFirst 'lib/x86/libc++_shared.so'
pickFirst 'lib/x86_64/libc++_shared.so'
pickFirst 'lib/armeabi-v7a/libc++_shared.so'
pickFirst 'lib/arm64-v8a/libc++_shared.so'
}
defaultConfig {
applicationId "com.stackoverflow" // !!! if copy-pasting change applicationId to yours
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
multiDexEnabled true
missingDimensionStrategy 'react-native-camera', 'general'
}
Open build.gradle(:opencv) and enable multidex option in default config. If you wish to use react-native-camera then also add missing dimension strategy. Should look something like this
defaultConfig {
minSdkVersion 21
targetSdkVersion 29
versionCode openCVersionCode
versionName openCVersionName
multiDexEnabled true
missingDimensionStrategy 'react-native-camera', 'general'
externalNativeBuild {
cmake {
arguments "-DANDROID_STL=c++_shared"
targets "opencv_jni_shared"
}
}
}
Also change the version of java in compile options (must be same as in build.gradle(:app). Should look something like this
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
Add the following user permissions to your /PATH_TO_YOUR_PROJECT/android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
Open gradle wrapper properties (/PATH_TO_YOUR_PROJECT/android/gradle/wrapper/gradle.properties) and change the version number of gradle
distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
Go to /YOUR_PROJECT_PATH/android/app/src/main/java/com/ and create reactlibrary folder then create two files inside that folder:
RNOpenCvLibraryModule.java
RNOpenCvLibraryPackage.java
Fill them with the same content as found on this GIT repo https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/android/app/src/main/java/com/reactlibrary
Open MainApplication.java and add this "packages.add(new RNOpenCvLibraryPackage());" to getPackage() method. Should look something like this:
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new RNOpenCvLibraryPackage()); // ADD THIS
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
Also add this to the onCreate() method:
#Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
if (!OpenCVLoader.initDebug()) { // ADD THIS
Log.d("OpenCv", "Error while init"); // AND THIS
} // DON'T FORGET THE "}"
}
Dont forget to add proper imports in the begining of your "MainApplication.java"
import org.opencv.android.OpenCVLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
Syncronize your project
File -> Syncronize Your Project with Gradle Files
Open the terminal and navigate to your project. Add this packages
cd /PATH_TO_YOUR_PROJECT/
npm i react-native-easy-toast --save
npm i react-native-svg --save
npm install --save react-native-camera#git+https://git#github.com/react-native-community/react-native-camera.git
(Make sure react-native-camera is installed from GIT repo otherwise you will encounter errors)
Create new folder nammed "src" in your PROJECT_PATH and copy the content of this repos ("https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/src") "src" folder to yours (/PATH_TO_YOUR_PROJECT/src/)
mkdir src
Copy the content of this repos "https://github.com/brainhubeu/react-native-opencv-tutorial/blob/master/App.js" App.js file and replace the content in your App.js file (located in YOUR_PROJECT_PATH)
Start react-native
npx react-native start
Run on Android device
npx react-native run-android

Answer 2

you can use this lib
react-native-opencv3
or you can exploit this project for using native Java and Objective-C bindings for OpenCV in react-native

Answer 3

If someone is still wondering here's the solution. It is quite some work to just set it up. You will have to write your OpenCV code in Java.
https://stackoverflow.com/a/63116300/10333905

Answer 4

sometimes the while trying to import opencv module, you will not proceed after selecting src directory. both next and finish option will be disabled. for this case.
create a folder "opencv" in the android folder and the copy all the files in the opencv sdk folder into this folder.
in setting.gradle add include ":opencv"
sync now.
goto project structure and add in dependency tab click on '+' icon on top app and select the module dependency and then opencv library.
Note:if the opencv is not present in the module dependency then you have copied the files wrongly. check whether the gralde file present in the files you copied