Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not building with RN 0.70, Reanimated 3 🐛 #1210

Closed
3 of 4 tasks
stryaponoff opened this issue Aug 24, 2022 · 45 comments
Closed
3 of 4 tasks

Not building with RN 0.70, Reanimated 3 🐛 #1210

stryaponoff opened this issue Aug 24, 2022 · 45 comments
Labels
🐛 bug Something isn't working

Comments

@stryaponoff
Copy link

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

@stryaponoff stryaponoff added the 🐛 bug Something isn't working label Aug 24, 2022
@SMJ93
Copy link

SMJ93 commented Aug 28, 2022

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
Copy link

Getting the same issue with:

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

@GuilleAntico
Copy link

GuilleAntico commented Sep 7, 2022

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

@hoanjizi
Copy link

hoanjizi commented Sep 8, 2022

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
Copy link

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
Copy link

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
Copy link

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

@Kailash23
Copy link

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
Copy link

spaceod commented Sep 13, 2022

+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
Copy link

issue with cmake :(

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

@hminhman
Copy link

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
Copy link

zfy171 commented Sep 15, 2022

cmake的问题:(

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

+1

@jextrevor
Copy link

Also having issues with

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

@erksch
Copy link

erksch commented Sep 16, 2022

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
Copy link

swushi commented Sep 23, 2022

Any update on this?

@NastuzziSamy
Copy link

NastuzziSamy commented Sep 30, 2022

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
Copy link
Contributor

DomiR commented Sep 30, 2022

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.

@timoschlueter
Copy link

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

@vbylen
Copy link

vbylen commented Oct 4, 2022

@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
Copy link

valn1 commented Oct 11, 2022

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:
image
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
Copy link
Contributor

DomiR commented Oct 14, 2022

@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:
image

These are then extracted by vision camera here:

task extractJNIFiles {
doLast {
configurations.extractJNI.files.each {
def file = it.absoluteFile
copy {
from zipTree(file)
into "$buildDir/$file.name"
include "jni/**/*"
}
}
}
}

Which is beeing configured here:

def reaAAR = "${nodeModules}/react-native-reanimated/android/react-native-reanimated-${REACT_NATIVE_VERSION}-${jsEngine}.aar"
extractJNI(files(rnAAR, jscAAR, reaAAR))

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:
Bildschirmfoto 2022-10-14 um 09 08 17

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)
Bildschirmfoto 2022-10-14 um 09 17 21

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

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

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
Copy link

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
Copy link

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
Copy link

kamo9527 commented Oct 18, 2022

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
Copy link

princefishthrower commented Oct 19, 2022

@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
Copy link

@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: image

These are then extracted by vision camera here:

task extractJNIFiles {
doLast {
configurations.extractJNI.files.each {
def file = it.absoluteFile
copy {
from zipTree(file)
into "$buildDir/$file.name"
include "jni/**/*"
}
}
}
}

Which is beeing configured here:

def reaAAR = "${nodeModules}/react-native-reanimated/android/react-native-reanimated-${REACT_NATIVE_VERSION}-${jsEngine}.aar"
extractJNI(files(rnAAR, jscAAR, reaAAR))

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: Bildschirmfoto 2022-10-14 um 09 08 17

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) Bildschirmfoto 2022-10-14 um 09 17 21

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

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

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?

@hari-mohan-choudhary
Copy link

Any update regarding Fabric
1668194355644
Screenshot_2022-11-12-00-20-21-159_com mayo

@noypi
Copy link

noypi commented Nov 15, 2022

"react-native-vision-camera": "^2.15.2",
"react-native": "0.70.5",

Please check announcement from ReactNative page: https://reactnative.dev/blog/2022/09/05/version-070

build.gradle is still using "Android.mk", but latest ReactNative does not have Android.mk file, but CMakeLists.txt

@jamninetyfive
Copy link

"react-native-reanimated": "^3.0.0-rc.7",
"react-native-vision-camera": "^2.15.2", 

same here.

Execution failed for task ':react-native-vision-camera:extractJNIFiles'.

Cannot expand ZIP '/Users/suren/WorkSpace/react/react-native/mark/node_modules/react-native-reanimated/android/react-native-reanimated-70-hermes.aar' as it does not exist.

@mrousavy need help.

@jamninetyfive
Copy link

issue with cmake :(

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

do you sloved.

@achahir
Copy link

achahir commented Jan 17, 2023

  • Delete build and .gradle from android folder
  • Delete node_modules, package-lock.json
  • Close intellij or VSCode and then reopen.
  • run npm i --force
    And fingers crossed, it will work

@gabrieljoelc
Copy link

"react-native-reanimated": "^3.0.0-rc.7",
"react-native-vision-camera": "^2.15.2", 

same here.

Execution failed for task ':react-native-vision-camera:extractJNIFiles'.

Cannot expand ZIP '/Users/suren/WorkSpace/react/react-native/mark/node_modules/react-native-reanimated/android/react-native-reanimated-70-hermes.aar' as it does not exist.

@mrousavy need help.

Got a different error with these versions when building on ios:

and then I found this software-mansion/react-native-reanimated#3831 (comment).

react-native-vision-camera doesn't supports Reanimated 3, if you want to use react-native-vision-camera you need to downgrade Reanimated to latest version 2.+

@truediogo
Copy link

confirmed, does not works with reanimated 3.x, and reanimated 2.x does not build with newArch enabled, so, no Fabric for Vision camera for now, maybe on #1376

@mrousavy
Copy link
Owner

mrousavy commented Feb 7, 2023

maybe on #1376

indeed. v3 will work on Fabric.

@KazakovVS
Copy link

Any updates on V3 reanimated support?

@melliston
Copy link

Been scratching my head with this for a couple of days now, seem on a new RN project. Trying to migrate the older code and it uses vision camera however it won't play nice with V3 reanimated either. On an M2 Mac if that makes any difference. Tried various versions of Reanimated 2 and it won't compile so try V3 and also won't compile.

@mrousavy
Copy link
Owner

mrousavy commented Mar 7, 2023

Again, VisionCamera V2 works with Reanimated V2. It does not work with Reanimated V3.

VisionCamera V3 ✨ will not use Reanimated anymore, so it will automatically work with Reanimated V3 (and V2 and V1 or no Reanimated installed at all).

VisionCamera V3 will soon be ready, but I only work on it in my free time. If you want to accelerate this, consider sponsoring me on GitHub ❤️ or buying me a coffee on Kofi ☕

@AjayParambath
Copy link

"react-native-reanimated": "^3.0.0-rc.7",
"react-native-vision-camera": "^2.15.2", 

same here.

Execution failed for task ':react-native-vision-camera:extractJNIFiles'.

Cannot expand ZIP '/Users/suren/WorkSpace/react/react-native/mark/node_modules/react-native-reanimated/android/react-native-reanimated-70-hermes.aar' as it does not exist.

@mrousavy need help.

I am using reanimated 2.4.1

I changed this
"react-native-reanimated": "^2.4.1",

to
"react-native-reanimated": "2.4.1",

then run this command:
cd android; ./gradlew clean; cd ..; npm i; npx react-native run-android;

this solved the issue

@Etaliya
Copy link

Etaliya commented Aug 4, 2023

I fixed this this solution
"react-native-reanimated": "3.3.0"
"react-native-vision-camera": "github:mrousavy/react-native-vision-camera#pull/1623/head"

@Ivanindiani
Copy link

I fixed this this solution "react-native-reanimated": "3.3.0" "react-native-vision-camera": "github:mrousavy/react-native-vision-camera#pull/1623/head"

What version of react native do you use, to test this solution

@Etaliya
Copy link

Etaliya commented Aug 5, 2023

"react": "18.2.0",
"react-native": "0.72.3"

@Ivanindiani
Copy link

Ivanindiani commented Aug 7, 2023

Yes, it does compile but if you want to use Frame Processors, it throws an error. I tried to solve it with this thread (#1533) but it did not achieve any effect.

" ERROR frame-processor/unavailable: Frame Processors are not enabled. See https://react-native-vision-camera.com/docs/guides/troubleshooting, js engine: hermes"

@mrousavy
Copy link
Owner

mrousavy commented Aug 8, 2023

V3 fixes this

@AwabIjaz
Copy link

@mrousavy any update on when V3 arrives ?

@mrousavy
Copy link
Owner

Closing as this is a stale issue - this might have been fixed with the full rewrite in VisionCamera V3 (🥳) - if not, please create a new issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working
Projects
None yet
Development

No branches or pull requests