How to properly install the plugin on a bare react-native project?

[LeonardoRubuz]

Hi Everyone!
So I've been struggling lately with the process of installing the plugin in a Expo-less project ( initialized with the command) :
npx react-native init project_name and the built failed
Someone caring to help?

[MatiPl01]

Hey!

Could you clarify, which plugin you are trying to install? You mean react-native-reanimated/plugin? It is already included in the react-native-reanimated package and you don't have to install it separately.

You said:

(initialized with the command) : npx react-native init project_name and the built failed

What do you mean that the build failed? You saw a failure after running just this initialization command or you saw crash after adding reanimated package?

I think that npx react-native is deprecated (or might have been already removed) so you will probably have to call this command instead for the react-native bare workflow initialization:

npx @react-native-community/cli init <AppName>

[LeonardoRubuz]

Hey @MatiPl01
So my issue wasn't about react-native-reanimated/plugin but more with the installation process in general.
I've initiated a new project with npx @react-native-community/cli init app_name command and set the babel.config.js.
Once I launch the build I got the following error :

 What went wrong:
Execution failed for task ':react-native-reanimated:buildCMakeDebug[arm64-v8a]'.
> com.android.ide.common.process.ProcessException: ninja: Entering directory C:\Users\HP\Documents\Projets\Mobile\libangadedicacemobile\node_modules\react-native-reanimated\android\.cxx\Debug\62o4pt73\arm64-v8a'
  [0/2] Re-checking globbed directories...
  [1/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/4dbc45c5f7ea9c1cb9db541b3158aa42/Registries/WorkletRuntimeRegistry.cpp.o
  [2/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/c0fe514ebb55b9e1983ff040f071be79/worklets/Tools/ReanimatedJSIUtils.cpp.o
  [3/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/278cd3e92ff893be2f13f84d40ffe53b/cpp/worklets/Tools/JSLogger.cpp.o
  [4/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/278cd3e92ff893be2f13f84d40ffe53b/cpp/worklets/Tools/JSScheduler.cpp.o
  [5/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/c0fe514ebb55b9e1983ff040f071be79/worklets/SharedItems/Shareables.cpp.o
  [6/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/4dbc45c5f7ea9c1cb9db541b3158aa42/Registries/EventHandlerRegistry.cpp.o
  [7/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/278cd3e92ff893be2f13f84d40ffe53b/cpp/worklets/Tools/UIScheduler.cpp.o
  [8/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/4dbc45c5f7ea9c1cb9db541b3158aa42/Tools/WorkletEventHandler.cpp.o
  [9/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/50be87e1e4e4b39e1f0c3795474c8a63/ReanimatedHermesRuntime.cpp.o
  [10/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/4dbc45c5f7ea9c1cb9db541b3158aa42/WorkletRuntime/ReanimatedRuntime.cpp.o
  [11/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/4dbc45c5f7ea9c1cb9db541b3158aa42/WorkletRuntime/RNRuntimeDecorator.cpp.o
  [12/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/__/cpp/PlatformLogger.cpp.o
  [13/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/beb31a9c60b5ac0313a32941f3f0be23/Fabric/ReanimatedCommitHook.cpp.o
  [14/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/beb31a9c60b5ac0313a32941f3f0be23/Fabric/ShadowTreeCloner.cpp.o
  [15/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/beb31a9c60b5ac0313a32941f3f0be23/Fabric/PropsRegistry.cpp.o
  [16/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/6fe61abb781c0c694a8f7fa6c028ede6/LayoutAnimationsProxy.cpp.o
  [17/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/6fe61abb781c0c694a8f7fa6c028ede6/LayoutAnimationsUtils.cpp.o
  [18/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/c0fe514ebb55b9e1983ff040f071be79/worklets/Tools/ReanimatedVersion.cpp.o
  [19/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/beb31a9c60b5ac0313a32941f3f0be23/Tools/FeaturesConfig.cpp.o
  [20/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/4dbc45c5f7ea9c1cb9db541b3158aa42/WorkletRuntime/WorkletRuntime.cpp.o
  [21/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/008a23817728b7ec0ccfc78b22989a5a/NativeReanimatedModuleSpec.cpp.o
  [22/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/60b27fcf960448e852725f937575147a/AnimatedSensorModule.cpp.o
  [23/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/6fe61abb781c0c694a8f7fa6c028ede6/LayoutAnimationsManager.cpp.o
  [24/37] Building CXX object src/main/worklets/CMakeFiles/worklets.dir/50be87e1e4e4b39e1f0c3795474c8a63/WorkletRuntimeDecorator.cpp.o
  [25/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/008a23817728b7ec0ccfc78b22989a5a/NativeReanimatedModule.cpp.o``

 5 errors generated.
  [25/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/beb31a9c60b5ac0313a32941f3f0be23/Tools/FeaturesConfig.cpp.o
  [26/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/beb31a9c60b5ac0313a32941f3f0be23/Tools/UIRuntimeDecorator.cpp.o
  [27/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/__/cpp/LayoutAnimations.cpp.o
  [28/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/__/cpp/JNIHelper.cpp.o
  [29/37] Building CXX object src/main/reanimated/CMakeFiles/reanimated.dir/__/cpp/OnLoad.cpp.o
  ninja: build stopped: subcommand failed.

  C++ build system [build] failed while executing:
      @echo off
      "C:\\Users\\HP\\AppData\\Local\\Android\\Sdk\\cmake\\3.22.1\\bin\\ninja.exe" ^
        -C ^
        "C:\\Users\\HP\\Documents\\Projets\\Mobile\\libangadedicacemobile\\node_modules\\react-native-reanimated\\android\\.cxx\\Debug\\62o4pt73\\arm64-v8a" ^
        reanimated ^
        worklets
    from C:\Users\HP\Documents\Projets\Mobile\libangadedicacemobile\node_modules\react-native-reanimated\android

* 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.

And here is how my package.json file looks like :

  {
    "name": "libangadedicacemobile",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "android": "react-native run-android",
      "ios": "react-native run-ios",
      "lint": "eslint .",
      "start": "react-native start",
      "test": "jest"
    },
    "dependencies": {
      "@react-navigation/bottom-tabs": "^6.6.1",
      "@react-navigation/native": "^6.1.18",
      "@react-navigation/native-stack": "^6.11.0",
      "react": "18.3.1",
      "react-native": "0.75.2",
      "react-native-gesture-handler": "^2.18.1",
      "react-native-reanimated": "^3.15.0",
      "react-native-safe-area-context": "^4.10.9",
      "react-native-screens": "^3.34.0"
    },
    "devDependencies": {
      "@babel/core": "^7.20.0",
      "@babel/preset-env": "^7.20.0",
      "@babel/runtime": "^7.20.0",
      "@react-native/babel-preset": "0.75.2",
      "@react-native/eslint-config": "0.75.2",
      "@react-native/metro-config": "0.75.2",
      "@react-native/typescript-config": "0.75.2",
      "@types/react": "^18.2.6",
      "@types/react-test-renderer": "^18.0.0",
      "babel-jest": "^29.6.3",
      "eslint": "^8.19.0",
      "jest": "^29.6.3",
      "prettier": "2.8.8",
      "react-test-renderer": "18.3.1",
      "typescript": "5.0.4"
    },
    "engines": {
      "node": ">=18"
    },
    "packageManager": "[email protected]"
  }

A more precise walkthrough would be very helpful