TL;DR: run npm start in your project root to avoid this error! I’m using Ubuntu 16.04 and Android, YMMV.
In teaching myself React, I’ve been pleasantly surprised by the documentation provided by Facebook. It’s very clear, I’ve been following along easily, and I never hit a speed bump. I was expecting something similar when I started on React Native.
Unfortunately, the React Native docs are a little less polished than those for React.
I started at the appropriately named Getting Started page. I’m running Ubuntu 16.04, and I’ve done Android development, so I followed the “React Native CLI Quickstart” choose-your-own-adventure path, clicking on “Development OS: Linux” and “Target OS: Android”.
I followed the instructions to the letter, except for a few things. I already had Android Studio installed, for example, so I didn’t have to do that. However, I initialized a fresh new React Native project using their installer, just as they said, even using the same project name: npx react-native init AwesomeProject.
I got down to the section entitled “Running your React Native application”, and did as instructed:
cd AwesomeProject
npx react-native run-android
This is what I saw in the Emulator: a message with white letters on a red background saying "Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release."
This was not one of those cases where I immediately knew what was wrong. Why are they talking about “Metro server”? How would I know if my bundle is packaged correctly for release??
I tried doing as the error message suggests:
~/AwesomeProject$ react-native start
react-native: command not found
No.
I went down one rabbit hole after another trying to fix the problem: First, I switched to USB debugging on an Android mobile device, because I thought the most obvious solution would be a problem with the Android Emulator (quite often, that is the problem). I got the same message there. (At this point, I started calling this page the “red screen of death”).
Finally, I got the app working in my mobile device by doing a release build:
~/AwesomeProject$ npx react-native run-android --variant=release
That worked! The app looked like this in my mobile device:
That was confidence inspiring because at least something worked. But it wasn’t useful; I wanted to be able to do hot reloading of my changes, and the install process of the release build was taking two to three minutes. No way was I going to spend 2 minutes waiting to see my changes.
Long story short, I finally figured out what was wrong (thank you, Stack Overflow).
The solution is to run npm start in the root of the project, like this:
~/AwesomeProject$ npm start
NOT react-native start, which was suggested in the error message, as I mentioned above. That was a total fail.
When I ran npm start in the command line, I saw this:
~/AwesomeProject$ npm start
> AwesomeProject@0.0.1 start /home/fullstackdev/AwesomeProject
> react-native start
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ Running Metro Bundler on port 8081. │
│ │
│ Keep Metro running while developing on any JS projects. Feel free to │
│ close this tab and run your own Metro instance if you prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/home/fullstackdev/AwesomeProject
Loading dependency graph, done.
BUNDLE [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (449/449), done.
LOG Running "AwesomeProject" with {"rootTag":1}
Notice the important message: “Keep Metro running while developing on any JS projects“. Doh! Thanks for telling me that.. now that it’s started, lol!
But now I’ve got my “Hello World” app running, and I can proceed working on something more interesting.