react-native-reanimated fails entire react native project build

Question

I am currently facing an issue where whenever I try to build my react-native project with react-native-reanimated installed the project fails to compile. When I uninstall react-native-reanimated¨the entire project builds and runs successfully.

I have tried to reset the cache by running

npm run start --clear-cache

And

npx react-native run-android

The version installed is:

"react-native-reanimated": "^3.3.0",

This is the output that I receive whenever I try to run the project with the package installed. I suspect that there is a mismatch between the package version and gradle. However 3.3.0 is the latest release of the package.


> Configure project :react-native-reanimated
No AAR for react-native-reanimated found. Attempting to build from source.
Android gradle plugin: 7.4.1
Gradle: 7.5.1
...

  -- Build files have been written to: C:/Work/repositories/react-native-client/node_modules/react-native-reanimated/android/.cxx/Debug/181x6l2t/arm64-v8a

  C++ build system [build] failed while executing:
      @echo off
      "C:\\Users\\AppData\\Local\\Android\\Sdk\\cmake\\3.22.1\\bin\\ninja.exe" ^
        -C ^
        "C:\\Work\\repositories\\react-native-client\\node_modules\\react-native-reanimated\\android\\.cxx\\Debug\\181x6l2t\\arm64-v8a" ^
        reanimated
    from C:\Work\repositories\react-native-client\node_modules\react-native-reanimated\android
  ninja: error: manifest 'build.ninja' still dirty after 100 tries


* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

2: Task failed with an exception.
-----------
* What went wrong:
java.lang.StackOverflowError (no error message)

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

* Get more help at https://help.gradle.org

BUILD FAILED in 35s

    at makeError (....\react-native-client\node_modules\execa\index.js:174:9)
    at ....\react-native-client\node_modules\execa\index.js:278:16
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async runOnAllDevices (....\react-native-client\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:82:7)
    at async Command.handleAction (....\react-native-client\node_modules\@react-native-community\cli\build\index.js:108:9)
info Run CLI with --verbose flag for more details.

Whenever I try to run the ./gradlew clean script in the android folder I also receive an No such file or directory error. I also suspect that it has something to do with the permissions or the react-native-reanimated based on other similar issues from other users.

./gradlew clean
:ReactNative:Running '[node, -e, try {console.log(require('@react-native-community/cli').bin);} catch (e) {console.log(require('react-native/cli').bin);}]' command failed.

FAILURE: Build failed with an exception.

* Where:
Script '/mnt/c/repositories/Pension/react-native-client/node_modules/@react-native-community/cli-platform-android/native_modules.gradle' line: 397

* What went wrong:
A problem occurred evaluating script.
> Cannot run program "node" (in directory "/mnt/c/repositories/Pension/react-native-client/android"): error=2, No such file or directory

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

How can I solve this issue?

UPDATE: Seems like there is an open issue on their Github repository. Which probably means this is a bug from their side.

https://github.com/software-mansion/react-native-reanimated/issues/4726

vinu varshith · Answer 1 · 2023-07-12T12:33:36.057

0

try adding this line in your babel.config.js

   module.exports = { ...,   plugins:
 ['react-native-reanimated/plugin'],
 
 };

edited Jul 12 '23 at 12:33

answered Jul 12 '23 at 12:30

vinu varshith

1
2

1

This doesn't work. Can you clarify how babel is the cause of the issue? Because I can't see the relation between Babel and the error that I am getting. – thetruth Jul 12 '23 at 16:35

score 0 · Answer 2 · answered Jul 13 '23 at 03:53

0

Reanimated v3.x.x require React-native 0.7x.x, trying to upgrade yoru react native version

answered Jul 13 '23 at 03:53

famfamfam

396
3
8
31

score 0 · Answer 3 · answered Jul 13 '23 at 04:06

add following code in your babel.config.js file

 plugins:[
    ...
    [
        'react-native-reanimated/plugin', {
            relativeSourceLocation: true,
        },
    ]
],

maybe it's because Reanimated plugin generate source location using absolute path, so that's why the file is not accessible using absolute path by adding above code it will user relative path and hope it will work.

react-native-reanimated fails entire react native project build

3 Answers3