reanimated not working

[birkir]

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]

@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]

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]

@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]

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

• Hard to debug issue related to "resolutions" in the root (https://github.com/facebook/metro/issues/678)
• We are manually linking all dependencies, auto linking is just not working, especially for second level package.json modules
• Bloated root node_modules for those who only want to work on web parts of the project. We use detox and other things that need to build on npm install. Not nice for those who are not RN devs
• Slow typescript runtime in VSCode of course (not related to RN directly)
• Issues with resolving files from other packages within nx, we had to write our own metro resolver. Eventually, magically, it started working with the nx resolver.
• I know devOps are not liking the package.json hack in rn app folder to bluff some js code that that is the app root folder etc. Makes the whole github workflow hard to maintain (https://github.com/island-is/island.is/blob/mobile-app/init/.github/workflows/native.yml#L55)

[peterlazar1993]

@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:

• nx-react-native used is built from master
• using this version scaffolds an RN 0.65.rc2 app
• Current published reanimated package does not support RN 0.65.rc2, so I built it from master
• changed .babelrc to babel.config.js in the app folder

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

[peterlazar1993]

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]

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]

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

• Rename apps/nativeappname/.babelrc to apps/nativeappname/babel.config.json
• yarn remove react-native-reanimated && yarn install -E react-native-reanimated // -> v2.2.0
• Delete node_modules/.cache
• yarn nx run-ios nativeappname

[bfischer1121]

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]

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]

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]

With my previously mentioned steps, I was able to run and use [email protected] with @nrwl/[email protected]

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

[Evanion]

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]

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