Some quick notes on including OpenCV in React Native
This article serve as a quick summary / indication for anyone who struggle on this. And only focus on the Android part (which I tried)
There is a few reference articles that help me through, the core one would be this article by Brainhub, they also have a github repo to start from.
The repo last update is 5 years ago, so below are items I would like to note down and share.
My Environment Setup (one of my earlier source of trouble)
- Android Studio installed on Windows 10
- Development inside WSL2
- React Native 0.70
- Gradle 7.5.1
- Java openjdk 11.0.13
Problems I faced and how I solve them
Missing react-native-camera when building
At the app’s build.gradle, add missingDimensionStrategy for react-native-camera
[My Stupidity] When building the main Gradle project, got complain of “more than one file found”
The error also refer to this section on Android developer site
I got this error when I followed the local OpenCV Library 4.6 folder’s (the folder is added after import module) build.gradle comments in the file:
Reference document from Brainhub does not include the line project(‘:opencv’).projectDir = XXXX , instead, they only have the “inclide ‘:opencv’ ”, adding the projectDir include the .so files from the opencv gradle project twice (I believe once from this openCV local folder and once from the projectDir folder), basically I did the Android Studio UI version and then the “or” manual version in the comment and so a failure.
Note that searching online, there are some article say adding packageOptions in the Gradle file with pickFirst optioncould help, but I just found that the pickFirst option is deprecated for current Android Gradle plugin version (7.2)
The react-native-camera is deprecated
This is a small problem, one could still use it, or use replacement “react-native-vision-camera”
I tried only up to compilation (as I encountered a bigger problem), at the settings.gradle (at root of android folder), do the follow (assume the library already installed through npm or other package manager):
And at android/src/main/java/<your_project>/MainApplication.java:
And at the React Native CameraScreens.js:
Invariant Error: ViewPropTypes has been removed from React Native
This is a troublesome one, as the problem’s caused from “react-native-camera” and “react-native-svg”.
The solution’s credit comes from this YouTube video.
The basic idea is to directly update react native’s function as follow:
The problem is, whenever package manager update packages (npm i / yarn add), this file would be replaced and need to make change again.
Other invariant caused by “react-native-easy-toast” in the example
I have been fed up by far, so I just removed the toast.
Conclusion
Up to this point, the example app can run successfully.
