Today I start to learn about React. After install React by some command in Terminal, I use react-native MyFirstProject to create my first project, and in my Android Studio emulator get a red error screen like this:
Error Screen
I tried to resolve follow there command but still have no idea what I am doing? Can someone explain for me how to fix it? Thank you.
To fix open a new terminal,go to your project folder and run
npm install
after installation complete
npm start
What “npm start” does is start your react package manager, read more about it in details here
https://github.com/rnpm/rnpm
Also run the command,
This is quite a useful tool during development.
adb reverse tcp:8081 tcp:8081
And last Reload.
For android one can use CTRL + R For apple one can use R + R (two
times R).
Looks you didn't install babel, babel module is not existion the the node_module.
npm install babel then npm start
If it doesn't work. You can try npm start --reset-cache
Hope it help.
Has anyone made eslint work with create-react-native-app in vscode on Windows 10? It is so unstable it's making my skin itch!
Latest npm doesn't work with create-react-native-app so I installed yarn. Now I can create an app. But I have to do this with cmd prompt outside of vscode otherwise I get no QR code to launch app on my phone.
I tried to install eslint locally with yarn, and use airbnb linting rules - this fails - if I install it with npm it works and I can initialise it with airbnb rules. Yay! I now have linting in my project.....but wait! Now I cannot start my project anymore because:
react-native-scripts start
'react-native-scripts' is not recognized as an internal or external command,
operable program or batch file.
This is killing me!! It's taken about 8 hours of $%^#ing around and I haven't even got to try any react native coding yet! Is it supposed to be this insane just to set up the environment?!!?
Anyone have any suggestions? I googled and looked at github issues but I see no solutions for this.
Thanks in advance!
Version 1.5.2 of create-react-app has options for using npm instead of Yarn as well as using a specific npm version. Use create-react-app -h to view help.
Have you also tried adding the following to your VS Code settings when using Yarn?
"eslint.packageManager": "yarn"
I just upgraded react-native version to 0.48.1 from 0.30 and I am facing a weird issue.
I fixed all the peer-dependencies for the libraries that I am using. then ran command,
react-native start
running above command starts packager. Now when I hit below url to generate jsbundle,
http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false
I am getting below error,
"message":"Ambiguous resolution: module '$PROJ_ROOT_DIR/index.android.js' tries to require 'react-native', but there are several files providing this module. You can delete or fix them:
$PROJ_ROOT_DIR/node_modules/jest-react-native/node_modules/react-native/package.json
$PROJ_ROOT_DIR/node_modules/react-native/package.json"
$PROJ_ROOT_DIR is my project directory path.
I don't have any '$PROJ_ROOT_DIR/node_modules/jest-react-native/node_modules/' directory in my setup.
I tried deleting node_modules directory then running npm install. but nothing changed.
I have also tried, clearing packager cache by running command,
ls -l $TMPDIR/react-*
but nothing happened.
Has anyone faced similar issue? any suggestions?
Thanks in advance!
In case anyone else facing same issue of similar issues, Clearing cache using below command worked for me.
npm start -- --reset-cache
I was trying react-native start -- --reset-cache command which does nothing(my bad.).
Just installed react native and trying to get Hello World up and running. Been receiving this error for the last few hours:
"No bundle URL present.Make sure you're running a packager server
or have included a .jsbundle file in your application bundle."
I've referred to this: What means of no bundle URL present in react-native? and other similar questions, and tried everything: using my ip addresse, different combos of react-native run-iso and npm install while running and not running, tried deleting builds, cleaning project, restarting Xcode, simulator multiple times, tried react-native-upgrade, edited into.plist to allow arbitrary loads, manually setting the path to my index.ios.js, everything, and nothing works.
I noticed many ran into this issue when trying to build on their device. i'm not trying to do anything fancy, just get 'hello world' up and running.
Any other solutions I am not aware of?
cd into YOUR_PROJECT/ios and rm -r build, then run again react-native run-ios
I have the same issue, my problem was with info.plist I just
config it as the following:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>
<key>NSAllowsLocalNetworking</key>
<true/>
</dict>
from this solution https://stackoverflow.com/a/48471978/1627358
And then add Bash config file .bashrc with this command:
echo "alias rni=\"kill \$(lsof -t -i:8081); rm -rf ios/build/; react-native run-ios\"" >> ~/.bashrc; source ~/.bashrc
Then run rni
from this solution https://stackoverflow.com/a/44080527/1627358
And it works fine with me.
run the following code:
killall -9 node
rm -rf ios/build
react-native run-ios
it will open launchpackager.command and the application will install on the ios simulator
The solution that worked for me.
You need to run:
yarn start
And at the same time (in a different terminal window):
yarn run:ios
Assuming that you are using nvm and multiple versions of node installed, here is the solution:
Say that you run npm install -g react-native-cli in node v6.9.5.
Now make node v6.9.5 as default by running nvm alias default 6.9.5
Now run react-native run-ios
The problem is, you have multiple versions of node installed via nvm and to install react-native-cli you have switched or installed latest version of node, which is not marked as default node to point in nvm yet. When you run react-native run-ios this opens up another new terminal window in which default nvm is not pointed to the node version where you have installed react-native-cli. Just follow the above setup, I hope that should help.
Answered the same here: https://stackoverflow.com/a/45267703/1292050
I had this issue after I run the following commands to clean the project to see the changes which were invisible because of the cache and so on:
watchman watch-del-all
rm -rf node_modules && npm install
rm -rf /tmp/metro-bundler-cache-* or npm start -- -- reset-cache
rm -rf /tmp/haste-map-react-native-packager-*
The reason for the issue was in the comment in dom-structure which didn't let the application run on the device. So, check the comments too ;)
faced similar issue while running in real device app was getting crash after uploading to testflight upload and install folks this issue is killer
saved by this link
https://onexlab-io.medium.com/no-bundle-url-present-fixed-ca2688a80f66
The solution that worked for me.
> sudo vim /etc/hosts
add
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
then
> sudo killall -HUP mDNSResponder
the reason is I change hosts
I had the same issue happen to me not too long ago. It appears that if you renamed the project to something else and the project folder itself was renamed, you need to make sure you replace all instances of the old name with the new name and do not forget to change file names of your .xcscheme in ProjectName > ios > ProjectName.xcodeproj > xcshareddata > xcschemes. I also had to remove the build directory. Hope this works for you as well!
I've run into this issue when I tried to sync my files to iCloud Drive. I have no idea what causes this, but as soon as I turn off my iCloud Drive and reinstall brew and Node, it started to work again. I can only think that when I turned on iCloud Drive, I might have ended up having two different Node versions or any other dependency.
To debug, your best first step is to scroll through the log text that outputs in the terminal window where you fired off "npx react-native run-ios" and search for the word like "error" or "failed". This will point you toward something more specific than the general "No bundle URL present" error.
For example, you might see something like "BUILD FAILED The following build commands failed: ProcessInfoPlistFile". In this example, I'd then know to go check on my Info.plist. You might see something different, but the debug methodology would still be the same.
If you are trying to run iOS, another idea is to build your app with Xcode itself by opening <YOUR_PROJECT_NAME>.xcworkspace with Xcode, then review its error messages.
Similarly, if you are trying to run Android, then try running with Android Studio and review its error messages.
Lots of answers are given, but one thing you should surely be taking care of while facing this issue is to
make sure that your Metro server is running.
npx react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'
Try This, clear project, and run in xCode.
This relates to the answers from #Daria Kozlova and #Daniel Twork
I needed to have the server running in another tab, i.e. yarn start
But what I hadn't noticed is that the server had crashed with an error like:
jest-haste-map: Watchman crawl failed. Retrying once with node crawler.
Usually this happens when watchman isn't running. Create an empty `.watchmanconfig` file in your project's root folder or initialize a git or hg repository in your project.
Error: Watchman error: std::__1::system_error: open: /Users/anentropic/Documents/Dev/Work/myproject/mobile-app: Operation not permitted. Make sure watchman is running for this project. See https://facebook.github.io/watchman/docs/troubleshooting.
...
watchmanResponse: {
error: 'std::__1::system_error: open: /Users/anentropic/Documents/Dev/Work/myproject/mobile-app: Operation not permitted',
version: '2022.09.12.00'
}
The fix for that can be found here:
https://github.com/facebook/watchman/issues/977#issuecomment-1189903929
i.e. run:
watchman watch-del-all
watchman shutdown-server
and then yarn start again
react-native run-ios works now
just try,
npm start
npm react-native run-ios
The below solved the same problem i had
brew update
brew reinstall watchman
Edit /etc/hosts
127.0.0.1 localhost
this is work for me !!!
When I run react-native link on my RN project, I got below error:
$ react-native link
rnpm-install ERR! ERRPACKAGEJSON No package found. Are you sure it's a React Native project?
Cannot read property '_text' of undefined
I have searched that some people say run react-native upgrade will resolve this issue. I have tried but no lock. My react version is shown as below:
$ react-native --version
react-native-cli: 2.0.1
react-native: 0.39.2
How can I solve this issue?
Follow below steps in order -
npm cache clean or yarn cache clean
rm -rf node_modules
yarn install or npm install
react-native upgrade ( You can choose no in all steps)
react-native link
If you get permission related error use sudo with all commands.
A little late but this may help someone else. My problem was large commented out copies of <manifest> ... </manifest> in android/app/src/main/AndroidManifest.xml. Once I removed commented out copies, link worked as expected.
It seems xmldoc had touble parsing the manifest even though the AndroidManifest.xml was valid XML. Calling react-native link uses ../node_modules/react-native/local-cli/core/android/index.js. To debug such issues in future I would start with putting debugging statements in ../node_modules/react-native/local-cli/core/android/index.js and narrow down to the root cause of the issue. Similar logic should work for ios.
For me cleaning the gradle did the trick.
1- Go to the root directory of the project.
2- Run cd android
3- Run gradlew clean
4- Run cd..
and then run the link commands
i had this problem. i fixed it with following way:
1- edit "/android/app/src/debug/AndroidManifest.xml"
2- add package="com.YOUR PACKAGE NAME" inline manifest tag. like:
<manifest package="com.YOUR PACKAGE NAME"
note: replace "YOUR PACKAGE NAME" with your package. you can find it in "/android/app/src/main/AndroidManifest.xml"
3- cd android
4- ./gradlew clean
5- cd ../
6- react-native link
try to go android -> src -> main -> AndroidManifest.xml and delete all comments here. After that rerun react-native link, and all is working for me. Good luck!