Not building with RN 0.70, Reanimated 3 🐛

[stryaponoff]

What were you trying to do?

Trying to build the app using release candidates of RN 0.70 and Reanimated 3

Reproduceable Code

No response

What happened instead?

Build failed because there are no aar now: both RN and Reanimated are building from source from 0.70

Relevant log output

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* Where:
Build file '%APP_ROOT%/node_modules/react-native-vision-camera/android/build.gradle' line: 588

* What went wrong:
Execution failed for task ':react-native-vision-camera:extractJNIFiles'.
> Cannot expand ZIP '%APP_ROOT%/node_modules/react-native-reanimated/android/react-native-reanimated-70-hermes.aar' as it does not exist.

Device

Pixel 3

VisionCamera Version

2.14.1

Additional information

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

[SMJ93]

Also getting the same issue with:

"react-native": "0.69.3",
"react-native-reanimated": "^3.0.0-rc.0",

Looks like react-native-vision-camera is not compatible with react-native-reanimated v3 yet.

[JavidHaji-zada]

Getting the same issue with:

"react-native": "0.70.0-rc.3",
"react-native-reanimated": "^3.0.0-rc.2",

[GuilleAntico]

i'm having issues with "react-native": "0.69.0", "react-native-reanimated": "^3.0.0-rc.0"

[hoanjizi]

I'm having issue with

  "react-native": "0.70.0", 
  "react-native-reanimated": "^3.0.0-rc.2",
  "react-native-vision-camera": "^2.14.1",

too. Hope this fix soon, thank you

[criss02-cs]

When I upgrade RN to 0.70 from 0.69.3 the build is going to gave an error. I think the library doesn't support RN 0.70 pls fix soon

[dmgallardo]

We are having the same issues, we currently have this versions:

"react-native": "0.69.0", 
"react-native-reanimated": "^3.0.0-rc.0"

Hope this get fixed soon!

[brizoalejandro]

Same case here, having issues with "react-native": "0.69.0", "react-native-reanimated": "^3.0.0-rc.0"

[Kailash23]

Recently moved to 0.70. Facing the same issue as mentioned above. @mrousavy Please let us know if you have plan to fix this soon ?🤔

[spaceod]

+1 Having the same.

react-native": "0.70.0 react-native-reanimated": "^3.0.0-rc.2 react-native-vision-camera": "^2.14.1

[coycoylaniba]

issue with cmake :(

react-native: "0.70.0" react-native-reanimated: "^2.10.0"

[hminhman]

I'm having issue with

  "react-native": "0.70.0", 
  "react-native-reanimated": "^3.0.0-rc.2",
  "react-native-vision-camera": "^2.14.1",

[zfy171]

cmake的问题:(

react-native: "0.70.0" react-native-reanimated: "^2.10.0"

+1

[jextrevor]

Also having issues with

"react-native-vision-camera": "^2.14.1",
"react-native-reanimated": "2.5.0",
"react-native": "0.70.0",

[erksch]

Hey girls and guys, I think we can stop posting our versions, the maintainers probably get the gist. The RN 0.70.0 compatible react-native-reanimated versions are not compatible with current react-native-vision-camera. It would be more helpful and productive to debug the build and look for a solution.

[swushi]

Any update on this?

[NastuzziSamy]

Hey guys, for those who are struggling with using this with RN 0.70.0, I managed to make it work (dev and prod) with the following package.json (as a fix is in main but not published as version) :

"react": "18.1.0",
"react-native": "0.70.0",
"react-native-reanimated": "2.10.0",
"react-native-vision-camera": "github:mrousavy/react-native-vision-camera#b7bb8e4",

Of course, don't forget to clean your gradle build, launch with android and start a clean metro:

cd android && ./gradlew clean && cd ..
npx react-native run-android
npx react-native start -- --reset-cache

[DomiR]

I don't think this is the problem described in the issue. @erksch did not summarize precisely, because 2.10.0 is actually compatible with rn 0.70.0. You can easily use rn 0.70.0 together with current (not pre-releases) published versions of both libraries. In some cases you might have the the following issue https://github.com/mrousavy/react-native-vision-camera/issues/1118 which was fixed in the main branch of this repo.

Problem is when you want to try out the newArch (see here how to try it yourself) because then you need to use reanimated 3 which does not include the react-native-reanimated-70-hermes.aar as can see in the issue description above, which means your project won't compile. The cmake file in this project needs to be updated to handle this.

[timoschlueter]

I ran into this issue as well. Any news on this? There is also issue #1260 which sounds familiar to this one.

[vbylen]

@DomiR could rolling back some of these commits https://github.com/mrousavy/react-native-vision-camera/pull/1186/commits provide a solution for us?

[valn1]

I don't think this is the problem described in the issue. @erksch did not summarize precisely, because 2.10.0 is actually compatible with rn 0.70.0. You can easily use rn 0.70.0 together with current (not pre-releases) published versions of both libraries. In some cases you might have the the following issue #1118 which was fixed in the main branch of this repo.

Problem is when you want to try out the newArch (see here how to try it yourself) because then you need to use reanimated 3 which does not include the react-native-reanimated-70-hermes.aar as can see in the issue description above, which means your project won't compile. The cmake file in this project needs to be updated to handle this.

it actually looks good to me, i only upgraded react-native-reanimated to the release candidate because of this: and so i upgraded it to resolve this vulnerability, but i don't think it will be a problem for now, so @NastuzziSamy 's sollution works perfectly, thx btw

[DomiR]

@vbylen Hey, no! That commit consumes hermes from source (instead of prebuilt). Now reanimated also does not distribute prebuilt anymore so we basically need to do the same - consume reanimated from source (instead of prebuilt).

As I'm no gradle ninja and only try to make it work I don't know the most elegant solution. I wanted to test fabric but I'm blocked by other libs but I can show you how to make vision camera consume the new reanimated temporarily (hermes + newarch).

Let me explain: The old reanimated distributed prebuilt files:

These are then extracted by vision camera here: https://github.com/mrousavy/react-native-vision-camera/blob/cc7d195cbd191c436b24ee2cab7a1daf9dd23b31/android/build.gradle#L583-L595

Which is beeing configured here: https://github.com/mrousavy/react-native-vision-camera/blob/cc7d195cbd191c436b24ee2cab7a1daf9dd23b31/android/build.gradle#L282-L283

Afterwards the vision camera node_modules folder looks like this and you can see that in the build folder of android there is the extracted aar containing the .so files:

We therefore first need to disable this extraction. Just patch the line L283 and remove reanimated: extractJNI(files(rnAAR, jscAAR))

The solution to this issue would be to either create a gradle task to copy over the generated .so files or somehow link them directly. As I said I don't know the most elegant solution. In the meantime we can do this by hand. For that we run gradle build one time (using hermes + newArch flags) where it should show you the error in this issue but it will generate the .so files in reanimated folder in node_modules (see screenshot). We then just copy them over to where vision camera expects them (e.g. android/build/react-native-reanimated-67-hermes.aar/jni)

Second step is to update the CMakeList.txt in vision camera as the reanimated flattened the headers directory here: https://github.com/software-mansion/react-native-reanimated/commit/bb3e42154807bc9f220d49d3c2a03521f58c2394

So instead of https://github.com/mrousavy/react-native-vision-camera/blob/cc7d195cbd191c436b24ee2cab7a1daf9dd23b31/android/CMakeLists.txt#L63-L70

We need this:

# --- Reanimated ---
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/AnimatedSensor"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/Tools"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/ReanimatedRuntime" # also new header
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/SpecTools"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/SharedItems"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/Registries"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/LayoutAnimations"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/hidden_headers"

As I mentioned I could not verify as I'm running into issues with other libs. Harder part is now to support multiple versions of reanimated where you need to pick the correct tasks depending on the version of reanimated you have installed, sorry to be no help here 😢

[kamo9527]

Hey guys, for those who are struggling with using this with RN 0.70.0, I managed to make it work (dev and prod) with the following package.json (as a fix is in main but not published as version) :

"react": "18.1.0",
"react-native": "0.70.0",
"react-native-reanimated": "2.10.0",
"react-native-vision-camera": "github:mrousavy/react-native-vision-camera#b7bb8e4",

Of course, don't forget to clean your gradle build, launch with android and start a clean metro:

cd android && ./gradlew clean && cd ..
npx react-native run-android
npx react-native start -- --reset-cache

@NastuzziSamy how to install this package? could you provide more information？thanks

[NastuzziSamy]

Hi @kamo9527 , you just have to copy/paste the deps in your package.json (check that you have no duplications)

I would recommand to delete your package.lock and node_modules and then run npm install

And then run the following scripts described in my comment.

[kamo9527]

comment @NastuzziSamy according to "react-native-vision-camera": "github:mrousavy/react-native-vision-camera#b7bb8e4", which version of react-native-vision-camera is correct? farther，I have try it you said ,but installing react-native-vision-camera failed

[princefishthrower]

@kamo9527 - just add that line exactly as is show to package.json. This is a standard (albiet uncommon) way of referencing a commit-specific version of a package. npm will recognize and install that for you. To be clear:

1. delete your node_modules folder
2. Paste in those lines (or modify just the version numbers) in your package.json file
3. issue npm install (or like in my case with rediculous react native deps, you may need npm install --legacy-peer-deps)
4. violá, packages installed

However @NastuzziSamy , couldn't get it to work with those exact versions, still getting Execution failed for task ':react-native-vision-camera:compileDebugKotlin'.

[thiavila-sigma]

@vbylen Hey, no! That commit consumes hermes from source (instead of prebuilt). Now reanimated also does not distribute prebuilt anymore so we basically need to do the same - consume reanimated from source (instead of prebuilt).

As I'm no gradle ninja and only try to make it work I don't know the most elegant solution. I wanted to test fabric but I'm blocked by other libs but I can show you how to make vision camera consume the new reanimated temporarily (hermes + newarch).

Let me explain: The old reanimated distributed prebuilt files:

These are then extracted by vision camera here:

https://github.com/mrousavy/react-native-vision-camera/blob/cc7d195cbd191c436b24ee2cab7a1daf9dd23b31/android/build.gradle#L583-L595

Which is beeing configured here:

https://github.com/mrousavy/react-native-vision-camera/blob/cc7d195cbd191c436b24ee2cab7a1daf9dd23b31/android/build.gradle#L282-L283

Afterwards the vision camera node_modules folder looks like this and you can see that in the build folder of android there is the extracted aar containing the .so files:

We therefore first need to disable this extraction. Just patch the line L283 and remove reanimated: extractJNI(files(rnAAR, jscAAR))

The solution to this issue would be to either create a gradle task to copy over the generated .so files or somehow link them directly. As I said I don't know the most elegant solution. In the meantime we can do this by hand. For that we run gradle build one time (using hermes + newArch flags) where it should show you the error in this issue but it will generate the .so files in reanimated folder in node_modules (see screenshot). We then just copy them over to where vision camera expects them (e.g. android/build/react-native-reanimated-67-hermes.aar/jni)

Second step is to update the CMakeList.txt in vision camera as the reanimated flattened the headers directory here: software-mansion/react-native-reanimated@bb3e421

So instead of

https://github.com/mrousavy/react-native-vision-camera/blob/cc7d195cbd191c436b24ee2cab7a1daf9dd23b31/android/CMakeLists.txt#L63-L70

We need this:

# --- Reanimated ---
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/AnimatedSensor"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/Tools"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/ReanimatedRuntime" # also new header
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/SpecTools"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/SharedItems"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/Registries"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/LayoutAnimations"
"${NODE_MODULES_DIR}/react-native-reanimated/Common/cpp/hidden_headers"

As I mentioned I could not verify as I'm running into issues with other libs. Harder part is now to support multiple versions of reanimated where you need to pick the correct tasks depending on the version of reanimated you have installed, sorry to be no help here 😢

@DomiR Did you manage to make your app work with Fabric, react-native-vision-camera and react-native-reanimated?