🐛 Building android with React Native 0.71

[erwanlpfr]

What were you trying to do?

Hello,

I am trying to build my application for android.
On iOS, it builds well and launches.

I use react-native-reanimated : 2.14.1.

I get these warings and errors on the android build :

> Configure project :react-native-vision-camera
VisionCamera: node_modules/ found at: /Users/***/node_modules
VisionCamera: Building with JSC...
Warning: The 'kotlin-android-extensions' Gradle plugin is deprecated. Please use this migration guide (https://goo.gle/kotlin-android-extensions-deprecation) to start working with View Binding (https://developer.android.com/topic/libraries/view-binding) and the 'kotlin-parcelize' plugin.
VisionCamera: Frame Processors are enabled! Building C++ part...
WARNING:DSL element 'dexOptions' is obsolete and should be removed.
It will be removed in version 8.0 of the Android Gradle plugin.
Using it has no effect, and the AndroidGradle plugin optimizes dexing automatically.

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/***/node_modules/react-native-vision-camera/android/build.gradle' line: 279

* What went wrong:
A problem occurred evaluating project ':react-native-vision-camera'.
> Expected directory '/Users/***/node_modules/react-native/android' to contain exactly one file, however, it contains no files.

Any idea if vision-camera is ready for react-native 0.71?

Thank you for your work!

Reproduceable Code

No response

What happened instead?

I get a gradle build error.

Relevant log output

No response

Device

Any

VisionCamera Version

^2.15.2

Additional information

• I am using Expo
• I have read the Troubleshooting Guide
• I agree to follow this project's Code of Conduct
• I searched for similar issues in this repository and found none.

[tyhour]

I also face with this issue. :(

[fleuverouge]

I guess this is the reason (from node-modules/android/README.md):

Starting from React Native 0.71, we're not shipping the `/android` folder inside the React Native NPM package
anymore due to sizing constraints on NPM. 
...
If you're a library author and you're manipulating the React Native .aar files, to extract headers,
extract `.so` files or do anything with it, you're probably doing something wrong. 

And in react-native-vision-camera/android/build.graddle:

 def rnAAR = fileTree("$reactNative/android").matching({ it.include rnAarMatcher }).singleFile

[Romick2005]

Suggested fix is to replace
VisionCamera_kotlinVersion=1.5.30
with
VisionCamera_kotlinVersion=1.7.0

react-native-vision-camera/android/gradle.properties

Line 16 in ae2c28a

VisionCamera_kotlinVersion=1.5.30

And also temporary disable frame processors for Android only until proper fix will be available.

PS Disabling Frame Processors cause losing some functionalities like bar code scanner.

[maharjanrajans]

+1

[liuthis]

+1

[zzz08900]

Note: this only happens if frame processors are enabled. With no frame processor one can bump kotlinVersion to 1.6.20 (or higher) and be done with it.

I'd say we should stay clear of 0.71 for a few months since a bunch of libs (I made 5+ patch-package to make my app build with 0.71, haven't tested functionalities yet) are broken because RN moved android artifacts to Maven.

Some of those broken libs can get away with a simple patch package(i.e. don't build RN from source, instead use the implementation("com.facebook.react:react-android") provided), others, like this one, requires some more effort.

On my side both reanimated and vision-camera has no support for Fabric so I'll stick to 0.67. I see no point upgrading RN since 1) we can't have React 18 features 2) we can't have Fabric 3) that's a ton of trouble upgrading RN.

[zzz08900]

3rd party libraries - updates and requests, if anyone is interested

reactwg/react-native-new-architecture#6

Note that I still had to make patch-package for some of those marked as "complete" to work with Fabric + 0.71, react-native-safe-area-context and react-native-screens included.

[edritech93]

same issue for me

[Productivix]

same issue for me, blocking

[zzz08900]

An rather crude (and dumb) solution would be
modify build.gradle to (or do it manually if you feel like it):

1. download RN aar from maven https://mvnrepository.com/artifact/com.facebook.react/react-android
2. download hermes aar from maven https://mvnrepository.com/artifact/com.facebook.react/hermes-android
3. place them back to where they were on 0.69/0.70, also change the filenames if necessary

This solution SHOULD enable people with almost zero knowledge about how the build process of react-native-vision-camera to use frame processors with RN 0.71.
To be clear: I didn't test it, I just pulled it from under my chair by looking at changelogs from RN0.69 to RN0.71 and some digging in mvn repo. It could work, or it could break things further.

[zzz08900]

It appears that both https://mvnrepository.com/artifact/com.facebook.react/react-native and https://mvnrepository.com/artifact/com.facebook.react/hermes-engine were abandoned after the incident on Nov 4, 2022.

So if someone went there and wondering why there's only rc0 but no stable version - you went to the wrong place :)

[Productivix]

hello, I tried to see the 2 links, but not obvious where to find a "aar" file in all tht a, a more précide link would be expected. I am not geek enough to find that.
And also "place them back to where they were on 0.69/0.7", I do not know where they were before... it is as if you have a book to guide you in the mountains that tells you " at the cross, take the right path." ;-)

[zzz08900]

hello, I tried to see the 2 links, but not obvious where to find a "aar" file in all tht a, a more précide link would be expected. I am not geek enough to find that. And also "place them back to where they were on 0.69/0.7", I do not know where they were before... it is as if you have a book to guide you in the mountains that tells you " at the cross, take the right path." ;-)

If you have no idea what those links are about then your best choice is to use a different version of react native, say 0.69.

From my perspective, at this time point, everyone should stay clear of 0.71 unless they have a very good reason to do so.

[Productivix]

thks, yes I stay on 0.69, but just work ahead to prepare next versions stacks.

[zzz08900]

thks, yes I stay on 0.69, but just work ahead to prepare next versions stacks.

Just wait for library maintainers to catch up with RN, it could take a few months though.

[caiodeambrosio]

Same issue here

[FDiskas]

Starting from React Native 0.71, we're not shipping the /android folder inside the React Native NPM package
anymore due to sizing constraints on NPM. The Android artifacts are distributed via Maven Central.
You can read more about it in this RFC:
react-native-community/discussions-and-proposals#508

[beeboopx]

+1

[mgenov]

Starting from React Native 0.71, we're not shipping the /android folder inside the React Native NPM package
anymore due to sizing constraints on NPM. The Android artifacts are distributed via Maven Central.
You can read more about it in this RFC:

It would be nice patch to be added for android artifacts to be retrieved from maven instead of node_modules as currently this change is breakable for upgrading to 0.71. The 0.70.x version has issues with hermes build and this issue is breaking the upgrade to 0.71 where it is fixed.

[abdullah-aj]

+1

[zzz08900]

Just tried the crude approach I suggested and I'm now hitting strange blockers.
In file included from ../../../../src/main/cpp/VisionCameraScheduler.cpp:5: ../../../../src/main/cpp/VisionCameraScheduler.h:8:10: fatal error: 'ReactCommon/CallInvokerHolder.h' file not found #include <ReactCommon/CallInvokerHolder.h>

I couldn't find anything related to changes in C++ parts in RN0.70 vs 0.71. The header file was of course intact and sits where it should be.
Any suggestions? Hints? Random thoughts?

[zzz08900]

Ok I think I got it.
Here's how you do library patching wrong, step by step:

1. Since RN0.71 remove the local maven repos, we need to download them from maven and place them back to where they were. Namely, https://mvnrepository.com/artifact/com.facebook.react/react-android and https://mvnrepository.com/artifact/com.facebook.react/hermes-android. For vision-camera you only need the aars (both debug and release varient), so go grab them.
2. Reconstruct the local mvn repo (or least reconstruct the parts we need) by creating the following two paths within your project's node_modules
   node_modules/react-native/android/com/facebook/react/react-native/{RN_FULL_VERSION}/
node_modules/react-native/android/com/facebook/react/hermes-engine/{RN_FULL_VERSION}/
   Replace RN_FULL_VERSION with the version you're using, say 0.71.0
3. Move the react-android aars into node_modules/react-native/android/com/facebook/react/react-native/{RN_FULL_VERSION}/, then replace the react-android filename prefix with react-native.
4. Move the hermes-android aars into node_modules/react-native/android/com/facebook/react/hermes-engine/{RN_FULL_VERSION}/, then replace the hermes-android filename prefix with hermes-engine.
5. I would recommend you build a script or something to do step 1 through 4
6. Next we patch your project. You'll need to modify several files. We'll start with top-level build.gradle - set kotlinVersion = "1.6.20" in top-level build.gradle
7. We also need to modify app/build.gradle - add the following lines wherever you please
   project.ext.react = [ enableHermes: true, ]
8. Finally we start modify react-native-vision-camera, navigate to the react-native-vision-camera folder within your node_modules and open CMakeLists.txt
9. Add the following line in target_include_directories - "${NODE_MODULES_DIR}/react-native/ReactAndroid/src/main/jni/react/turbomodule"

Now you should be able to use react-native-vision-camera as before.

I'll say this again: The above steps are how you do library patching wrong. It is "With Enough Thrust Pigs Fly Just Fine" in action and you should definitely do library patching in the other direction - patch the library, not the framework, and probably never patch the framework to make it closer to an older version.

I made this post just to highlight where things have changed and maybe provide some insights about how one could patch react-native-vision-camera in the right way to support RN0.71. So I won't disclose a repo or anything that automates the steps above.

Fun fact: I was never a fan of Java/Gradle/Maven or anything that's Java-bounded so there is zero chance I'll make a proper fix for this issue.

You guys have a nice day.

[zzz08900]

Ok I guess Java wins this round. I actually made a (half-baked) fix.
Here's a (kinda) improper patch-package I made, which makes react-native-vision-camera@2.15.2 BUILD with frame processors enabled. I didn't fully test functionality, so use at your own risk.

You'll still need to do step 6 and 7 though, but I figure you only need to do that once.

https://github.com/zzz08900/vision-camera-071-fix/blob/main/react-native-vision-camera%2B2.15.2.patch

You'll find some strange formatting diffs in the patch file, I didn't want to bother myself to get rid of those since the original build.gradle was formatted in a rather strange way, so I left those as is.

And I didn't test it with hermes disabled.
You guys have a nice day.

[badsyntax]

@zzz08900 thanks for this work, any reason why you can't submit these changes as a PR?

[zzz08900]

@zzz08900 thanks for this work, any reason why you can't submit these changes as a PR?

Because the fix is half-baked.
I only wanted to modify minimum amount of code so I downloaded the aars into node_modules/react-native/android, which is where the aar files were on older react native versions. Thus I didn't have to touch anything else and they would just work.

I don't think modifying node_modules/react-native from react-native-vision-camera is a good idea since it has the potential to break many, many other things. I guess @mrousavy would agree.

And the patch-package could break things if you are not using hermes(no test was done there, but I guess it could).

And I didn't change how react-native-vision-camera detects hermes(without project.ext.react = [ enableHermes: true, ] react-native-vision-camera would think you're using jsc)

So the patch-package is at best a temporary workaround, if you feel like it you can make it into a proper PR. I got my hands full of other problems for now.

I would say the patch-package is a flying pig with HUGE rocket thrusters.

[muzhaqi16]

Adding kotlinVersion = "1.7.0" (under buildToolsVersion) to android/build.gradle fixes it for now.

here

[mazhuang123]

thks,It took two days until the answer was found here.The method of adding a remote dependency library is invalid, only aar can be used

[gyges101]

Suggested fix is to replace
VisionCamera_kotlinVersion=1.5.30
with
VisionCamera_kotlinVersion=1.7.0

react-native-vision-camera/android/gradle.properties

Line 16 in ae2c28a

VisionCamera_kotlinVersion=1.5.30

And also temporary disable frame processors for Android only until proper fix will be available.

PS Disabling Frame Processors cause losing some functionalities like bar code scanner.

It worked for me using kotlinversion=1.6.20

But i changed also sdk and buildtools to 33

[Productivix]

I do confirm for 1 week ago I change kotlin version to more , see #1460 (comment)

but sorry , where did you "changed also sdk and buildtools to 33" please?

[mdgb]

Just tried the crude approach I suggested and I'm now hitting strange blockers. In file included from ../../../../src/main/cpp/VisionCameraScheduler.cpp:5: ../../../../src/main/cpp/VisionCameraScheduler.h:8:10: fatal error: 'ReactCommon/CallInvokerHolder.h' file not found #include <ReactCommon/CallInvokerHolder.h>

I couldn't find anything related to changes in C++ parts in RN0.70 vs 0.71. The header file was of course intact and sits where it should be. Any suggestions? Hints? Random thoughts?

I am having the same problem, did you manage to solve it?