search

nrwl / nx-react-native

87 stars 21 forks source link

reanimated not working #61

Open birkir opened 3 years ago

birkir commented 3 years ago

It looks like it's impossible to get reanimated to work.

They use something called worklets, where babel will extract pieces of code into separate files that run in on a two different threads (UI/JS thread).

This is the error that cannot be solved with thread suggestions to fix them.

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

peterlazar1993 commented 3 years ago

@birkir Were you able to make any progress on this?

I have tried the suggestions on https://github.com/software-mansion/react-native-reanimated/issues/1777 with no luck.

birkir commented 3 years ago

Yeah no luck for me, I've been wondering if moving RN outside nx is the way to go forward. Too many issues encountered so far.

peterlazar1993 commented 3 years ago

@birkir I may have found a fix fo this. What is your app name?

I suspect that having a folder name like sample-app as opposed to sample is the root of this issue.

On an unrelated note, I am evaluating NX for a new react native project. Any chance you could put up a summary of what issues you've encountered?

birkir commented 3 years ago

Understood. Do you know the culprit, or what module is causing the issue?

peterlazar1993 commented 3 years ago

@birkir Thank you so much for this. Extremely useful.

Regarding the issue itself, please see this repo https://github.com/peterlazar1993/sample This repo builds fine and I was able to run reanimated code with worklets. I highly suspect the app name is the culprit. I shall validate by adding another app to this monorepo like demo-test.

Couple of caveats:

Also the upcoming version of nx-react-native has fixes for the linking issues, https://github.com/nrwl/nx-react-native/pull/77

peterlazar1993 commented 3 years ago

Based on further investigation it is not an issue with folder name. See a working setup here https://github.com/peterlazar1993/sample

I believe this issue will be resolved in the upcoming release.

likern commented 3 years ago

Hello 👋 guys! Thanks for insights! Could you give summary - do you recommend using nx for React Native?

I want to support 2 RN packages in monorepo (heavily using reanimated 2) and example app for testing these packages. Looking for lerna / yarn workspaces / rush / nx options.

What do you recommend? Lerna? I want as seemless experience as possible, ideally without customer resolvers and etc.

bfischer1121 commented 3 years ago

@peterlazar1993 's steps above work. I did the following...

bfischer1121 commented 3 years ago

Also had to manually import reanimated (import 'react-native-reanimated'), otherwise the compiled worklets would be undefined. Not sure why that was necessary as it's not in their installation docs.

joe307bad commented 3 years ago

I have tried the suggestions here, and also cannot use reanimated + nx react native. Here is the repo I am working in: https://github.com/joe307bad/past

I keep getting an error

 ERROR  Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

This error is located at:
    in WobbleExample (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40), js engine: hermes
 ERROR  Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

This error is located at:
    in WobbleExample (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40), js engine: hermes
Process terminated. Press <enter> to close the window
joe307bad commented 3 years ago

I resolved my issue. I was running into a weird glitch where it seemed my bundler kept opening up in a different context (in a different RN project on my laptop). Killing the process of the bundler, running nx run <project name>, and then running nx run-android <project name> resolved it for me.

joe307bad commented 3 years ago

With my previously mentioned steps, I was able to run and use react-native-reanimated@2.3.0-beta.1 with @nrwl/react-native@12.3.6

https://github.com/joe307bad/past/tree/e8c804a8fff5a207d05a453e83f89d41946f97a8

Evanion commented 2 years ago

I've tried the solutions mentioned here with the following versions, and the issue persists :/ "@nrwl/react-native": "13.2.3", "react-native-reanimated": "2.3.0",

everettblakley commented 2 years ago

For me, the steps from @bfischer1121 as well as a pod install --repo-update and Product > Clean Build Folder in XCode worked to get it running on iOS