React Native CLI project not working with newArchitecture when added reanimated library to package.json

Description

I’m trying to migrate my expo CLI project to react-native CLI project where I have created the new react-native CLI project from scratch and tried to add dependencies into package.json similar to what I have in my expo CLI project. It works till there is no ‘react-native-reanimated’ library. But when I add the ‘react-native-reanimated’ using ‘npm i react-native-reanimated’ to new project of react-native CLI and do ‘npx react-native run-android --active-arch-only’ the build fails with the below mentioned error stacktrace.

stacktrace

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

BUILD FAILED in 35s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 -PreactNativeDebugArchitectures=x86 -PreactNativeArchitectures=x86
CMake Deprecation Warning at CMakeLists.txt:42 (cmake_policy):
The OLD behavior for policy CMP0026 will be removed from a future version
of CMake.

The cmake-policies(7) manual explains that the OLD behaviors of all
policies are deprecated and that a policy should be set to OLD only under
specific short-term circumstances. Projects should be ported to the NEW
behavior and not rely on setting a policy to OLD.

e: /Users/ee211312/Desktop/react-native/plmtrustlink_mobile/node_modules/react-native-gesture-handler/android/noreanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (6, 7): Redeclaration: ReanimatedEventDispatcher
e: /Users/ee211312/Desktop/react-native/plmtrustlink_mobile/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (5, 22): Unresolved reference: reanimated
e: /Users/ee211312/Desktop/react-native/plmtrustlink_mobile/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (7, 7): Redeclaration: ReanimatedEventDispatcher
e: /Users/ee211312/Desktop/react-native/plmtrustlink_mobile/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (8, 35): Unresolved reference: ReanimatedModule
e: /Users/ee211312/Desktop/react-native/plmtrustlink_mobile/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (12, 56): Not enough information to infer type variable T
e: /Users/ee211312/Desktop/react-native/plmtrustlink_mobile/node_modules/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: (12, 72): Unresolved reference: ReanimatedModule

FAILURE: Build failed with an exception.

What went wrong:
Execution failed for task ':react-native-gesture-handler:compileDebugKotlin'.
A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction
Compilation error. See log for more details

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 (/Users/ee211312/Desktop/react-native/plmtrustlink_mobile/node_modules/@react-native-community/cli-platform-android/node_modules/execa/index.js:174:9)
at /Users/ee211312/Desktop/react-native/plmtrustlink_mobile/node_modules/@react-native-community/cli-platform-android/node_modules/execa/index.js:278:16
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async runOnAllDevices (/Users/ee211312/Desktop/react-native/plmtrustlink_mobile/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:109:5)
at async Command.handleAction (/Users/ee211312/Desktop/react-native/plmtrustlink_mobile/node_modules/@react-native-community/cli/build/index.js:142:9)
info Run CLI with --verbose flag for more details.`

My package.json

{ "name": "my_crossplatform_mobile", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint ." }, "dependencies": { "@react-native-async-storage/async-storage": "~1.17.3", "@react-navigation/drawer": "^6.4.3", "@react-navigation/native": "^6.0.11", "@react-navigation/native-stack": "^6.7.0", "buffer": "^6.0.3", "gs1-barcode-parser": "^1.0.1", "jetifier": "^2.0.0", "jexl": "^2.3.0", "jwt-decode": "^3.1.2", "moment": "^2.29.4", "react": "18.1.0", "react-dom": "^18.0.0", "react-native": "0.70.3", "react-native-config": "1.4.6", "react-native-dialog-input": "^1.0.8", "react-native-gesture-handler": "^2.7.1", "react-native-modal": "^13.0.1", "react-native-pager-view": "5.4.15", "react-native-reanimated": "^2.11.0", "react-native-restart": "^0.0.24", "react-native-safe-area-context": "^4.4.1", "react-native-screens": "^3.18.2", "react-native-select-dropdown": "^2.0.4", "react-native-splash-screen": "^3.3.0", "react-native-step-indicator": "^1.0.3", "react-native-svg": "^12.4.3", "react-native-tab-view": "^3.1.1", "react-native-uuid": "^2.0.1", "react-native-vector-icons": "^9.2.0", "react-native-web": "0.17.7", "react-native-webview": "^11.22.7", "react-timer-mixin": "^0.13.4", "uuidv4": "^6.2.13" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "babel-jest": "^26.6.3", "eslint": "^7.32.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "0.72.3", "react-test-renderer": "18.1.0" }, "jest": { "preset": "react-native" } }

my index.js

/**

@Format
*/
import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
//import App from './App';
import App from './src'
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);`

src/index.js

`import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import config from './config'
import screen2 from './containers/screen2'

const App = () => {

const Stack = createNativeStackNavigator();
console.log('Environment Type: ', config.ENVIRONMENT_TYPE)
return (

<Stack.Navigator
screenOptions={{
headerShown: false,
gestureEnabled: false
}}>
{/* < Stack.Screen name="Helpdesk" component={Helpdesk} /> */}
< Stack.Screen name="Root" component={screen2}/>
</Stack.Navigator>
);
};

export default App;

src/screen2.js

import 'react-native-gesture-handler';
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';

function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>

);
}

function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />

);
}

const Drawer = createDrawerNavigator();

export default function scrren2() {
return (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
);
}

babel.config.js

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

Could you please help me what I have done wrong?

Steps to reproduce

1. Create a sample react native CLI project as mentioned in https://reactnative.dev/docs/environment-setup
2. Add the package.json, index.js, src/index.js and 2 screens as shown in above descirption
3. do ‘npm i --force’ and run the application using ‘npx react-native run-android --active-arch-only’

Snack or a link to a repository

none

Reanimated version

“react-native-reanimated”: “^2.11.0”

React Native version

“react-native”: “0.70.3”

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

No response

Acknowledgements

Yes

[shreyakupadhyay]

@tomekzaw I have gone through https://github.com/software-mansion/react-native-reanimated/issues/3534, and a very nice explanation was mentioned by you in one of the comments. So I check my Fabric true or false value and found it returned true.

Can you please help me with it. It’s a huge roadblock for the product development and there is no work around that I am able to find.

[kyle-ssg]

Duplicate of https://github.com/software-mansion/react-native-reanimated/issues/3534 that has reproduction. People seem to be facing this for V3 too @tomekzaw