Installation of react native

React Native
1

Hi,
I am a beginner in react native, from visual studio code I launched the npm start command which worked well, I want to run the application on an emulator, I followed a tutorial which had a web page in localhost:19000 which I didn’t get, I need to see this page to start running on the emulator.
thank you for helping me.

what i got when i typed localhost:19000

{“name”:“FirstApp”,“slug”:“FirstApp”,“version”:“1.0.0”,“orientation”:“portrait”,“icon”:“./assets/icon.png”,“userInterfaceStyle”:“light”,“splash”:{“image”:“./assets/splash.png”,“resizeMode”:“contain”,“backgroundColor”:“#ffffff”,“imageUrl”:“http://127.0.0.1:19000/assets/./assets/splash.png"},“updates”:{“fallbackToCacheTimeout”:0},“assetBundlePatterns”:[“**/*”],“ios”:{“supportsTablet”:true},“android”:{“adaptiveIcon”:{“foregroundImage”:“./assets/adaptive-icon.png”,“backgroundColor”:“#FFFFFF”,“foregroundImageUrl”:“http://127.0.0.1:19000/assets/./assets/adaptive-icon.png”}},“web”:{“favicon”:“./assets/favicon.png”},“_internal”:{“isDebug”:false,“projectRoot”:“C:\\Users\\imane\\FirstApp”,“dynamicConfigPath”:null,“staticConfigPath”:“C:\\Users\\imane\\FirstApp\\app.json”,“packageJsonPath”:“C:\\Users\\imane\\FirstApp\\package.json”},“sdkVersion”:“46.0.0”,“platforms”:[“ios”,“android”],“iconUrl”:“http://127.0.0.1:19000/assets/./assets/icon.png”,“debuggerHost”:“127.0.0.1:19000”,“logUrl”:“http://127.0.0.1:19000/logs”,“developer”:{“tool”:“expo-cli”,“projectRoot”:“C:\\Users\\imane\\FirstApp”},“packagerOpts”:{“dev”:true},“mainModuleName”:“node_modules\\expo\\AppEntry”,“__flipperHack”:"React Native packager is running”,“hostUri”:“127.0.0.1:19000”,“bundleUrl”:“http://127.0.0.1:19000/node_modules\expo\AppEntry.bundle?platform=ios&dev=true&hot=false",“id”:"@anonymous/FirstApp-3d9589aa-1c21-436a-aae9-663bfebc30de”}

2

after running npx expo start, just press i for iOS or a for Android simulators.

3

I’ve just started the Ultimate React Native course and after some research it seems that the Expo CLI Web UI (the page for the Metro Bundler that you see in Mosh’s videos) is now deprecated.

As @delboy1978uk said, you can run your React Native project through the npx expo start command. You can also run npm start like Mosh does, this will automatically run expo start. There is a difference between these two commands, expo start will work if you installed the expo CLI globally with npm, npx expo start will run the expo CLI locally (if you installed it local to your React Native project).

Depending on whether you installed the expo CLI globally with npm (which I recommend) you can alternatively use expo start with the double-dash flags.

  • Android - expo start --android
  • IOS - expo start --ios
  • Web expo start --web

The web flag will automatically open your web browser with localhost and the appropriate port displaying your app in the browser. The android flag will open your app on your emulated device, if you followed Mosh’s video on running your app through an emulated device you would have ended up installing Android Studio and setting one up with the AVD (Android Virtual Device) manager. An important note (which I’m sure Mosh mentions), you must have your emulated device running before using expo start --android otherwise you will get an error in the terminal which will say that you must create a virtual device or plug in an Android device to your development machine.

I hope this helps. I know there has been a lot of updates with some of the tools that Mosh uses in the Ultimate React Native course, but as he mentions at the start of the course, a little Googling can go a long way :slight_smile:

Have fun with React Native!

1 Like