React Native - Failed to load bundle in iOS - ios

I am native iOS app developer but i also want to be aware of latest and trending technology so i choose to get my hands on react native. Now, i am getting this error when trying to run my react native created app on iOS. I enter the command react-native run-ios and simulator started and after that app opened but in starting it showed this screen.

There are couple of solutions available in the link below. Please try them.
https://github.com/facebook/react-native/issues/21310
for now after react-native init, since a lot of new changes are coming out, this fix worked for me (I got it from reading other issues):
with npm:
npm install --save-dev #babel/core
npm install --save-dev #babel/runtime
or with yarn:
yarn add --dev #babel/core
yarn add --dev #babel/runtime
if on ios you get _this._registerEvents is not a function, after a successful build
do
npm run start --reset-cache
or
react-native start --reset-cache

For me i got reason for issues that for now since a lot of new changes are coming out like Xcode 10 itself is new and react native is not yet merged with that, this fix worked for me:
with npm:
npm install --save #babel/runtime
or with yarn:
yarn add #babel/runtime

Related

react-native init does not create ios folder using last version 69.5

I'm new at react-native and I can easily create a react-native app using Expo, but there is no way using react-native init with Mac OS.
I have checked all the recommendations on internet, but the ios folder is never created.
Versions I have:
-Node v18.8.0
-Watchman v2022.08.22.00
-cocoapods v1.11.3
-xcode Version 13.4.1
I have tried all the recommendations I found: react-native upgrade, react-native-eject, reinstalling react-native-cli...,but no way.
I think that the template is not correct.
Can someone tell me how to solve this issue?
Expo updated today, just download the latest version of react-native. After creating the project, type in your terminal yarn add react-native#latest / npm install react-native#latest
Perhaps you mistyped, but rather than reinstalling react-native-cli try uninstalling:
npm uninstall -g react-native-cli
As suggested in the docs, globally installed react-native-cli can cause issues, and missing the iOS folder/incomplete init is indeed one of them.
Once global react-native-cli is installed re-run react-native init

error React Native CLI uses autolinking for native dependencies - RN iOS

I'm new to React native. I get the following error when I try to start the project in the ios simulator. How can I solve this?
Newer versions of React Native have autolinking, therefore you don't need to run commands like npx react-native link some-package-name to link the dependencies
In order to get rid of this error you need to unlink the dependency mentioned in the log, use the following instructions
Run npx react-native unlink #react-native-async-storage/async-storage
Run npm uninstall #react-native-async-storage/async-storage
Run npm install #react-native-async-storage/async-storage
Change to the ios directory cd ios and run pod install
That should solve this issue

Invariant Violation: Native component for "RNSVGSvgView" does not exist

After days of research on the internet I still haven't solved my problem yet.
I am using react-native-svg and I am having the same issues:
No component found for view with the name "RNSVGPath"
Or this one:
Invariant Violation: Native component for "RNSVGSvgView" does not exist
I tried a lot of things, including:
react-native unlink react-native-svg
npm uninstall react-native-svg
npm install react-native-svg
react-native link react-native-svg
react-native run-ios
Also:
pod 'RNSVG', :path => '../node_modules/react-native-svg'
rm -rf node_modules
npm install
react-native run-ios
But still nothing...
Here's the versions I am using:
"dependencies": {
"react": "16.1.1",
"react-native": "0.50.3",
"react-native-svg": "^6.0.1-rc.1"
}
I tried to build it from XCode directly and still nothing...
Thanks for your help guys !
You should try to do this:
npm install react-native-svg --save //(again)
react-native link react-native-svg //(again)
watchman watch-del-all
rm -rf node_modules/ && yarn cache clean && yarn install
Then in another terminal
npm start -- --reset-cache
Before starting your ios app with react-native run-ios, you have to add libRNSVG.a manually to your Linked Frameworks and Libraries in Xcode
And then ... Tada
SVG Problem, I also stuffed 4 hours and get the solution.
Automatic link:
react-native link react-native-svg
Does not work automatically then you do with manually.
Manual Link:
1 Append the following lines to android/settings.gradle:
include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
2 Insert the following lines inside the dependencies block in android/app/build.gradle:
implementation project(':react-native-svg')
3 Open up `android/app/src/main/java/[...]/MainApplication.java
Add import com.horcrux.svg.SvgPackage; to the imports at the top of the file.
Add new SvgPackage() to the list returned by the getPackages() method. Add a comma to the previous item if there's already something there.
I had this problem because "react-native link" is broken as of RN 0.51. Linking manually after complete removal and reinstall fixed it on iOS.
Svg have problem with version
first, unlink svg then remove npm of svg then install new one
"dependencies": {
"react": "16.1.1",
"react-native": "0.44.0",
"react-native-svg": "5.1.8"
}
I had the same issue but on Android.
So, if you are in the same conditions, here is something that fixed it, the trouble happened specifically on MainApplication, so you want to look at :
open android/app/src/java/com/*/MainApplication.java
add import com.horcrux.svg.SvgPackage; on top with other imports
add new SvgPackage() along the others in the list getPackages() (~line 30-ish)

Unable to resolve module react/lib/ReactUpdates

I'm cloning a proyect:
The steps are:
npm i
react-native link
When i run it react-native run-ios i have a problem with RCTWebSocket library. This problem is easy to resolve if you search a little just need remove 2 compiler flags, in Custom Compiler Flags.
Later just i run again react-native run-ios and works fine, but when the app is open, show the next error:
Searching i found that is related to upgrade, source here
but i'm using that command and not works.
When this command is executed, it starts showing me some overrides to some files and at the end of this process, the problem persists.
My react info:
react-native-cli: 1.0.0
react-native: 0.32.1
I'm running in Xcode 8 and ios 10.0
PDTA: When I start a new project works perfect
UPDATES:
When clone on another mac works, I am ensuring to have the same versions of both xcode and node.
Could it be some mac configuration problem?
The only difference between the 2 macs is the cli version:
`react-native-cli: 1.1.0` --> my mac
`react-native-cli: 1.2.0` --> the other mac
Will this be enough to cause all this problem?
With React 0.32~0.37: The problem is most likely that you are using React 15.4.x instead of 15.3.x. One of the changes between 15.3 and 15.4 was that many of the modules under react/lib were moved to react-dom/lib, which is why the packager can't find react/lib/ReactUpdates.
Ensure that your package.json file locks React to 15.3.x:
"dependencies": {
"react": "~15.3.2"
}
Then delete your node_modules folder and run yarn or npm install again. Verify that you installed React 15.3.x:
$ npm ls react
app#1.0.0 /code/app
└── react#15.3.2
Last, restart the React Native server and load your bundle again.
This has been fixed!
Update your dependencies and use react-native ^0.38.0 or newer.
Run react-native upgrade after all react-native version upgrades.

React-native#0.26.3 requires a peer of react#15.0.2 but none was installed

I am trying to set up for the react native. but whenever I update files it gives m error
enoent ENOENT: no such file or directory, open 'React Native/package.json'
npm WARN react-native#0.26.3 requires a peer of react#15.0.2 but none was installed.
npm WARN React Native No description
npm WARN React Native No repository field.
npm WARN React Native No README data
npm WARN React Native No license field.
MacBook-Pro:React Native$ npm info react dist-tags.latest
Please let me know how can I fix.
Installing react should fix the error
npm install react --save
Also, you may try upgrading your react-native install. react-native is as v0.30.0 now
npm update react-native
In my specific case I was running npm install in the wrong directory. I thought I was in my project directory but was one level higher. This meant react was missing from installed packages (because there were none) and thus gave this error.
Some steps that worked for me:
1. watchman watch-del-all
2. rm -rf node_modules
3. npm install react#15.0.2 --save
4. npm install react#15.1.0 --save
5. npm install
6. rm -fr $TMPDIR/react-*
7. npm start -- --reset-cache
In my case, the project I am working on requires a specific version of React. Since it was older than the current release, doing an install/update would still cause the error.
In order to fix the problem, I had to check the package.json of the project and install the exact version allowed by the dependency definition. In the OP's case, a
npm install react#15.0.2
should fix the problem by installing the exact version of the React module that react-native requires.
Verify that the condition was resolved by doing a npm list to see if there are any other unmet peer dependencies.

Resources