skip to Main Content

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?

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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)
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search