search

react-native-community / cli

The React Native Community CLI - command line tools to help you build RN apps
MIT License
2.41k stars 905 forks source link

react-native-reanimated giving error on latest react nativev0.75.2 cli project #2499

Closed zeeshan9 closed 2 months ago

zeeshan9 commented 2 months ago

Environment

% npx react-native info

System: OS: macOS 14.5 CPU: (11) arm64 Apple M3 Pro Memory: 67.27 MB / 18.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 20.12.1 path: ~/.nvm/versions/node/v20.12.1/bin/node Yarn: version: 1.22.22 path: /opt/homebrew/bin/yarn npm: version: 10.5.0 path: ~/.nvm/versions/node/v20.12.1/bin/npm Watchman: version: 2024.08.05.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.15.2 path: /Users/zeeshanm/.rbenv/shims/pod SDKs: iOS SDK: Platforms:

  • DriverKit 23.5
  • iOS 17.5
  • macOS 14.5
  • tvOS 17.5
  • visionOS 1.2
  • watchOS 10.5 Android SDK: API Levels:
  • "29"
  • "33"
  • "34" Build Tools:
  • 30.0.3
  • 33.0.1
  • 34.0.0 System Images:
  • android-33 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2023.2 AI-232.10300.40.2321.11567975 Xcode: version: 15.4/15F31d path: /usr/bin/xcodebuild Languages: Java: version: 17.0.10 path: /usr/bin/javac Ruby: version: 2.7.5 path: /Users/zeeshanm/.rbenv/shims/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.3.1 wanted: 18.3.1 react-native: installed: 0.75.2 wanted: 0.75.2 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Description

I just created a new react native projec few days ago in 0.75.2 in react-native cli. I am using react navigation lib v6, i want to use drawer for that i installed react-native-reanimated package but it keeps showing error i have tried a lot things, combining different version between react-native-gesture-handler and reanimated, but it always show some new error. Mostly its shown error worklet one and the isConfugured is undefined and other image that is shown. I have even create a project in cli 0.73.3 and in 0.72.6 hoping maybe reanimated work fine there but its giving issue everywhere, i have added import 'react-native-gesture-handler'; in top of my app.ts also saw a solution somewhere to do that.

i have added animated pugin in bable.config.js too, module.exports = { presets: ['module:@react-native/babel-preset'], plugins: [ 'react-native-reanimated/plugin', ], };

i am stuck for many days, if anyone know the correct compatible version on which there app is running let me know. i have run command npm run doctor my settings and other configuration are all good. i have install ndk in v26 from android sdk. Really need help here, I am creating my first app to lauch in playstore and appstore. but my project have many screens so ineed drawer. Also just to let you know if i remove reanimated packge and also the drawer then project is running fine. I have tried the its latest version, 3.3.0, 3.10.1 onward to to 3.15, also 2.2.0 , 2.7.0 but nothing seems to works. image

image

Reproducible Demo

https://github.com/zeeshan9/wealthspecter.git you can clone my above repo or add new project in react native just install react native navigation packages and it will give error.

szymonrybczak commented 2 months ago

hey @zeeshan9, I checked your example demo and it's building fine for me:

❯ yarn android
Alias tip: y android
info Launching emulator...
info Successfully launched emulator.
info Installing the app...
Starting a Gradle Daemon (subsequent builds will be faster)

> Task :app:installDebug
Installing APK 'app-debug.apk' on 'Medium_Phone_API_TiramisuPrivacySandbox(AVD) - 13' for :app:debug
Installed on 1 device.

BUILD SUCCESSFUL in 3m 12s
54 actionable tasks: 54 executed
info Connecting to the development server...
8081
info Starting the app on "emulator-5554"...
Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.wealthspecter/.MainActivity }

but I needed to change a nodeLinker, because for some reason your project was created with PnP which is not supported by React Native. To fix your issue, please run:

yarn config set nodeLinker node-modules
zeeshan9 commented 2 months ago

Hi @szymonrybczak, Really Thanks for your help, I was using npm and it seems their is really some issue there i posted it react-native-animation/community too. But looking at your response i shifted my project from npm to yarn and its work good. No build errors on drawer and reanimated too. I also ran the nodeLinker command Really thanks buddy. I was stuck for 2 days and i always used npm but now from today experince i even going to shift to yarn. Also l have created created my own drawer using built in react native feature like pan-gesture etc and it also working good hopefully make a package out of it soon if possible. Anyone else reading this, make sure don't use ndk 27, because 3.15.2 is not yet integrated in that. and also for some reason current latest version in react-native-reanimted is giving error if you use npm. Try yarn