How can I import OpenCV library to React-Native project

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 these 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
    
  • Leave a Comment