Is the "Loading from metro..." screen only for development, or can I remove it?

ServerBloke 0
Viewed 42

I created a new app using `npx react-native init MyApp' which uses the default template. When I run the app both in the simulator and live on my device (iPhone), this happens:

  1. Splash screen shows for a moment
  2. "Loading from metro" screen shows for several seconds - overwriting my splash screen

enter image description here

  1. Main app screen shows

My question is: does this metro screen only show for development and if I publish in the App Store it will not appear? Or is there a way to hide it and go direct from the splash to the main app screen?

iphone ios react-native
2 Answers

The screen is shown just in the development mode and won't be seen when you debug or release build your application, just try it by

FOR ANDROID

Step 1: Go to the root of the project in the terminal and run the below command:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Step 2: Go to android directory:

cd android

Step 3: Now in this android folder, run this command

./gradlew assembleDebug

There! you’ll find the apk file in the following path: yourProject/android/app/build/outputs/apk/debug/app-debug.apk

Same goes for IOS too.

ADIL AHMED0

The metro screen only shows for debug builds. Make and run a Release build to run the app without the metro screen.

To make a Release build for ios:

To run release build in simulator:

npx react-native run-ios --configuration Release

To run release on phone:

  1. In xcode Product menu > scheme > edit scheme
  2. In sidebar click Run
  3. Select build configuration: Release
  4. Close dialog
  5. Run using Product > Run (same as when testing)
MrCode0
Related