Getting error RCTBridge required dispatch_sync to load RNGestureHandlerModule. This may lead to deadlocks - react-native

I'm getting the same error as this issue
However rather than RCTDevLoadingView mine is referring to RNGestureHandlerModule.
Similar to the issue linked above, my guess is that it's something related to making an update in the appdelegate.m file, however I cant figure out what that entails.
I'm using react-native 0.67.1 and react-native-gesture-handler 2.2.0.
Thank you

UPDATE: the issue was fixed in version 2.8.0
So if you do not depend on the old versions, just run
npm install react-native-reanimated#latest
or yarn add react-native-reanimated#latest.
Then cd ios && pod install
Old answer:
Change react-native-reanimated version to ~2.2.4 in package.json, then run
npm install or yarn install
cd ios && pod install
The answer was got from here

This seems to be fixed in 2.8.0:
https://github.com/software-mansion/react-native-reanimated/commit/d6c73042900767e4065284cc39970c2fe0d73a97
This did, in fact, cause deadlocks for me like the warning said it could. (So it's nice that it's actually fixed instead of them just trying to hide the warning and making it harder to debug. Fortunately it didn't hide it in the Xcode console, or this would have been a real nightmare...)

Related

BigCommerce Stencil Blank Screen

Losing my will to live with this one.
Went to start up my BigCommerce project and the localhost URL is just showing a blank screen. Zero errors in command line or in the browser console so I have absolutely no clue why it's just a blank screen.
Running Stencil Version 5.2.2
NVM 14.20.0
NPM 6.14.17
Not really sure what else to share, as I said, I'm getting no errors anywhere to give me a clue as to what's going on. Has anyone else experienced this?
I had the same issue.
I have momentarily downgrade to stencil-cli 5.2.0
I uninstalled and reinstall # 5.2.0 e.g.
npm uninstall -g #bigcommerce/stencil-cli
npm install -g #bigcommerce/stencil-cli#5.2.0
This isn't a fix I know, but might get you working in the meantime.
There appear to be some bugs in the newer versions of stencil-cli.
https://github.com/bigcommerce/stencil-cli/issues/994
Downgrading appears the solution for the moment.
Edit:
Bigcommerce are pushing an upgrade to their PHP app today to fix this

TypeError: global.__reanimatedWorkletInit is not a function. (In 'global.__reanimatedWorkletInit(_f)', 'global.__reanimatedWorkletInit' is undefined)

TypeError: global.__reanimatedWorkletInit is not a function. (In 'global.__reanimatedWorkletInit(_f)', 'global.__reanimatedWorkletInit' is undefined)
I am using React Native (not expo). I don't even have reanimated downloaded. I had it downloaded then I removed it and rebuilt the app, and it's giving me this error now.
Things I've tried:
deleting node_modules and re-running yarn install
-git reset HEAD~ to a prev commit where I didn't install the reanimated2 packages
I just followed the below steps to solve this issue.
step1: npx react-native run-android
step2: npm start -- --reset-cache
and it solved
Ok, what I ended up doing to solve this was:
-just deleted the whole repo from my local
-cloned it again from github
-uninstalled the app from Android emulator
Then it seemed to work. So maybe it was an error related to cache or something lingering around even after I had removed all instances of the word/package "reanimated" from the whole codebase.
Using Expo in a bareworkflow
Clear app memory
run expo start --dev-client --clear
I solved my issue doing this:
https://github.com/wcandillon/react-native-redash/issues/395
On top you just have to do this: import 'react-native-reanimated';
on your app or index file.
I have tried all the solutions from stack Overflow. (Not working)
Here is the fix:
first check your version for react-native-reanimated and then see the actual documentation of the right version for the configuration.
I am using version 2.4.1 and have solved by this link
I had a require cycle warning from a git submodule inside the src folder which I thought wasn't doing any harm but turns out fixing that solved this issue. I am unsure why the require cycle was causing so much grief but I guess if you've got a require cycle in your output try solving that and it may fix this.
What I did was degrading react-native-reanimated to ^2.6.0. It solved the issue for me.
I had this problem too and simply moved the babel plugin react-native-reanimated/plugin to the last place in the babel's config as stated in the doc.
I should probably mention it worked for me before but when I started migrating the react-native app for web this was the problem for me. I am using expo. I had to run expo with --clear CLI arg as expo start --dev-client --clear.
I Just solved this issue by doing these steps:
close Metro bundler
run this command
npm start -- --reset-cache
react-native start --reset-cache
rebuild the project again

Task :app:compileDebugJavaWithJavac FAILED

I've tried looking for a way to solve this error. It's occurring to me while I try to install my app with react-native run-android.
Already took a look at the solutions from this thread, but my project isn't named native, ./gradlew clean from the android folder didn't work, and I tried deleting the .gradle folder. I've also tried my own simple solutions that sometimes work for whatever reason - uninstalling the app from my phone before re-running react-native run-android and reopening VSCode.
This error started occurring after I installed react-native-unimodules, following the android instructions. A potential problem I see from this is just that react-native-unimodules is supposed to be for Expo and I'm doing things with React Native CLI, but from what I understood, this is allowed.
My react-native version is 0.61.5, react-native-cli is 2.0.1.
Edit:
build.gradle file, as requested.
Also, I don't know if it's relevant, but since it was part of one of the suggested answers, I'll mention this as well: in the gradle.properties file,
android.useAndroidX=true and android.enableJetifier=true were already present.
This is a pretty common case, but what ive figured out during my app building, these steps always helped.
First you need to add below lines in gradle.properties file
android.useAndroidX=true
android.enableJetifier=true
Then after that you need to install, jetfier via either yarn or npm like :
npm i jetifier // first this then the below
npx jetify
After that again re-bundle your code and then run, hope it helps. Feel free for doubts

Upgrading react native to latest version

I have an application which runs on react-native 0.49.3
I want to upgrade to the latest version which is v0.57.4.
Should I incrementally update it? For example 0.49 -> 0.50 -> 0.51 etc
Or I can just update it to to the latest version?
Do you suggest using react-native-git-upgrade or rn-diff?
My advice is to upgrade to the latest version. There will be enough dependency issues anyway so you're best dealing with them only once.
From the React Native upgrade page
(https://facebook.github.io/react-native/docs/upgrading)
you can run:
npm install -g react-native-git-upgrade
npm install -g #react-native-community/cli
react-native-git-upgrade
UPDATE 2:
The new command is
npx react-native upgrade
but I believe this is best for upgrading from more recent versions. If you have older versions, the following upgrade process still applies.
UPDATE:
I've never had a problem before with upgrades, but recently joined a project where we upgraded from an old copy of React Native 0.44.3 to a newer version (first to 0.57.8, then to 0.55.4, then to 0.58.3 while struggling with stability) and discovered that it's not always as easy as running those commands. Be warned that this could be a long, tedious process, especially if you have not upgraded regularly and have a long gap between upgrades. In this case, it was 18 months since they had upgraded.
First, there have been changes to the upgrade process itself (react-native upgrade, to now react-native-git-upgrade) itself. So, if you're using a version that's a year old or more there could be some manual discrepancies that you'll have to go through. Some are spelled out after running the react-native-git-upgrade command, and some are not. I was amazed at the number of people on Stack Overflow going through the same undocumented circular issues of a seemingly innocent upgrade. I was not expecting that. I'd be OK with Facebook not adding any features for 6 months and simplifying the upgrade process before moving on.
Second, make sure your version of React Native uses the right dependencies. Later versions of the upgrade tool (react-native-git-upgrade) try to account for this, but double check at https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md to see if the version of RN that you're upgrading to requires a specific dependency. Some do while others do not.
Next, library hades is real, depending on how big your project is. In our case, several modules in use in our 0.44.3 version have now been deprecated or no longer maintained or even work differently with the later versions of RN. I didn't consider this enough when starting this process. This caused several instances of code rewrite just to upgrade!! Yikes!
Also, just as some versions of React Native require specific versions of dependencies, other modules require specific versions of some dependencies. Worse, sometimes these are incompatible and conflicting versions, of various libraries. Save some time and write a user story or two to account for this. Go through every module you're using and see if there are any compatibility statements on their GitHub page. Some Readme files will tell you to use certain versions of their module with certain versions of React Native. Others won't and you may find out later there are requirements. But even going through this process and anticipating issues, you'll thank yourself later.
Once you're up to date and stable, consider upgrading regularly to minimize the upgrade nightmare that I just went through.
You will need #react-native-community/cli to upgrade to the latest version of react-native, sadly not mentioned anywhere.
npm install -g #react-native-community/cli
Install react-native-git-upgrade
npm install -g react-native-git-upgrade
Now go to your project.
cd your-react-native-project
Now you can run the upgrade command.
react-native upgrade
Just change the path to the project for which you want to upgrade the react native version and then run this command:
react-native upgrade
and after running this command you will see some questions. Type n to discard the change to that file or type y if you want to modify that file.
It will automatically install the latest version of react-native for your project.
More info at:
https://facebook.github.io/react-native/docs/upgrading
OR
You can upgrade react native version by this simple step:
1- Just go to package.json file of your project
2- After that, look for these lines
"dependencies": {
"react-native": "0.57.8",
}
3- Change the react-native version to any version that you want to upgrade to in "dependencies".
4- After this run npm install and react native version will be upgraded for your project.
I would recommend using this tool (upgrade helper) which allows you to compare your current react native version and latest react native version.
Also, It's good to upgrade react-native frequently to stay up to date with the latest version and make the upgrade process easy.
https://react-native-community.github.io/upgrade-helper/
I recommend visiting this page: https://github.com/react-native-community/rn-diff-purge
because you can see the list of exactly what changes in each version. I find it's simpler to manually change config settings after starting from your version that is proven to work properly via react-native run-android and react-native run-ios.
It sounds like a horrible task, but it's not very difficult for your fingers or brain to remove red lines and add green lines--at least compared to alternatives such as Googling to sort out horrific error messages in the Android/iOS build systems.
I also believe that it's a good idea to manually change config settings for example going from 0.44 to 0.59 because you get more of an opportunity to see exactly what is changing in each version. You'll see the changes are reasonable and generally have bearing on fostering future automation and increasing the build systems' robustness and aversion to breakage.
Additionally, changes were implemented in RN 0.59 that makes react-native upgrade better, and in addition to my additional statement, the whole 0.59 release is pretty massive and important for future: http://facebook.github.io/react-native/blog/#upgrading-to-059
I'm not even going to talk about react-native upgrade or react-native-git-upgrade because I find those to be generally a source of nightmares especially if you get into react-native unlink and react-native link.
You can update to the latest version directly, I'd recommend to do it with react-native-git-upgrade, but do be careful to read the update release notes on the versions up to yours, they have some notes about things you should do manually that the upgrade will not. You can find the notes here: https://github.com/facebook/react-native/releases
The notes are usually on top in the changelogs, I know the latest releases had some of those and gave me some work to update from 0.54 recently so be aware.
In case there are changes then you can either update them manually by copying and pasting from the changes in the page or you can do it with the React Native CLI upgrade command by running:
npx react-native upgrade
As explained in the docs: https://reactnative.dev/docs/upgrading
react-native upgrade
npm i react-native#{{VERSION}}
npm i react#{{VERSION}}
https://facebook.github.io/react-native/docs/upgrading
https://react-native-community.github.io/upgrade-helper/?from=0.59.9&to=0.61.0
Even with using the new upgrade helper https://react-native-community.github.io/upgrade-helper/ I still run into a bunch of issues and it takes forever to debug them. The best and most reliable way I have found to upgrade after react-native core teams make big changes like adding fast-refresh or flipper that involves a lot of xcode related changes it just start from scratch.
create new repo
npx react-native init newProject
STEP 1 -
make sure the new app runs properly so you know if you have an xcode/react native package issues that need to be upgraded. I know I ran into an xcode issue that forced me to upgrade to a new mac os version.
STEP 2 - pull up old projects xcworkspace or xcodeproj if you are not using any custom pods and just copy over the important stuff like the signing stuff and potentially any custom build scripts you have. I have custom fonts so I pull that over
STEP 3 - copy over app specific code, think app folder or src and any files that live in the root of your project.
STEP 4 - Run npm install and pod install if you have custom pods
STEP 5 - Important not to just paste over the App.js/tsx file but instead just render a simple view with text in it. If your app will run here then it means all your npm/pods are configured properly. Usually I run into a bunch of error in this step which require me to upgrade npm/pods to new version to deal with breaking changes in react-native
STEP 5.a - One by one add in each line from your original App.js/tsx file and testing if anything breaks. Sometimes its useful to reset your metro cache in between changes and removing the build folders inside of ios and android during debugging. Also its very helpful to use the chrome debugger stop on exception functionality here so you know where the issues are coming from
STEP 6 - copy over .git folder from previous project that lives in the root of your project so you can keep your version history or just create a new git repo if you dont care about this.
I have upgraded RN to newer versions in a couple of hours using this method multiple times. I typically write myself some notes while I do it to speed to up the process next time I need to upgrade. Good Luck!
npx react-native upgrade
Should do all the work for you.
use cammand npx react-native upgrade
if you are facing errors it's due to some deprecated packages.So comment all pages and in route and step by step add your pages and replace your deprecated packages with new .
And also use this update helper 'https://react-native-community.github.io/upgrade-helper/'
You can Upgrade with 4 simple step
npm install -g #react-native-community/CLI
npm install -g react-native-git-upgrade
cd your-react-native-project
react-native upgrade
Thanks :)

React-native Xcode build fails -> 'RCTAssert.h file not found'

I did exactly the steps which are described here in the React-native getting started guide:
https://facebook.github.io/react-native/docs/getting-started.html
When I open the Project and build it, the build fails:
RCTAssert.h file not found' in MyProjectNameTests.m .
What am I missing?
Here are the steps from the getting started guide:
Requirements
OS X - This repo only contains the iOS (7+) implementation right now,
and Xcode only runs on Mac.
Xcode 6.3 or higher is recommended.
Homebrew is the recommended way to install io.js, watchman, and flow.
Install io.js 1.0 or newer. io.js is the modern version of Node.
Install nvm with its setup instructions here. Then run nvm install
iojs-v2 && nvm alias default iojs-v2, which installs the latest
compatible version of io.js and sets up your terminal so that typing
node runs io.js. With nvm you can install multiple versions of Node
and io.js and easily switch between them.
New to npm?
brew install watchman. We recommend installing watchman, otherwise
you might hit a node file watching bug.
brew install flow. If you want to use flow. We recommend
periodically running brew update && brew upgrade to keep your
programs up-to-date.
Quick Start
npm install -g react-native-cli
react-native init AwesomeProject
In the newly created folder AwesomeProject/
Open AwesomeProject. xcodeproj and hit run in Xcode. Open index.ios.js
in your text editor of choice and edit some lines. Hit cmd+R in your
iOS simulator to reload the app and see your change!
The test application can't find the header because it's not in the header search path.
In the left hand file list, hit the top left "folder" icon, then select your application at top left. In this case "AwesomeProject".
To the right of that, where the application icon appears, hold down to change to AwesomeProjectTests.
On the right side, click on the 'Build settings' tab.
Then scroll down to Header Search Paths and change "$(SRCROOT)/node_modules/react-native/React" to "$(SRCROOT)/../node_modules/react-native/React".
The app should now compile.
I got the same issue as daniel but I already have the right path in xcode ...
0.10.0 is my version
It's an issue in 0.10.0, and it has been fixed just now.
You need to re-generate your project. Refer to this PR: https://github.com/facebook/react-native/pull/2474
seeing same issue here and it seems react-native is latest on 0.10.0, i was using 0.8.0 and was running fine. May be to disable the test target for now?
Before testing any option from the above mentioned solutions, just clean your xCode and build the app again. That helped me
I had the same issue (I just had changed my apple ID password). I needed to redo the code signing configuration.
This happened to me on a React Native project.
I rolled back my code to a version that I knew built successfully and still got this error. How is this even possible? There's two hours of my life I'll never get back. I write this here on the chance I save you from the same fate.
In my case when I jump from my IDE in which I code my react-native project over to Xcode I open it from Spotlight.
At this point it is so easy to click the wrong icon on the right hand side. I accidentally clicked on the Xcodeproj file instead of the Xcworkspace. Easy to do, once it loads everything looks exactly the same, I was none the wiser.
The only indication that something had gone wrong was the build errors. Worse this error looks like a dependency management issue sending you down completely the wrong path in a resolution attempt.
This is not just a React Native specific issue, but something all Cocoapod users need to remember.
ADD the React Path to Podfile
platform :ios, '9.0'
target 'YourProject' do
...
pod 'React', :path => '../node_modules/react-native'
end
target 'RNFirebaseTests' do
...
pod 'React', :path => '../node_modules/react-native'
end