CODEWITHSUNDEEP
androidreact-nativeexpoandroid-virtual-device
UncaughtDanError
UncaughtDanError

Reputation: 139

Expo App Not Displaying Custom Icon and Splash Image

I pulled down the repo for our mobile app, added our custom PNG image files into the assets folder, updated the paths in app.json for "icon" and "splash". I expected this to display custom app icon and splash screen images. However, when I run our npm run android script, which builds and runs the app by running expo run:android, the default Expo icon is still displayed for the app icon and app splash page.

  1. Checked and verified the file paths. The paths specified in app.json for my assets are:
  "icon": "./src/assets/images/icon.png",
  "splash": {
    "image": "./src/assets/images/splash.png"
  }
}

I even confirmed the image's location using the command ls ./src/assets/images/icon.png.

  1. Ensured the images are in PNG format.

  2. Cleared caches using expo start --clear, deleted node_modules, and executed fresh dependency installations.

  3. Reset the data on the Android Virtual Device (AVD).

  4. Created a test app using npx create-expo-app. This app successfully displayed the custom splash image (but not the icon image, since it was running in Expo Go) when I ran npm run android.

  5. I realized that the test app's script was running expo start --android while the main app's script was running expo run:android. I modified this to match the test app's script and saw the same behavior as with the test app. However, I need it to run and work with expo run: android.

  6. I tried to run the app on a physical device but ran into problems when when trying to scan the QR code.

I don't have a ton of mobile dev experience and am pretty stuck at this point. If you have any ideas or have run into this before, I'd really appreciate some help. Thanks!

Upvotes: 8

Views: 8611

Answers (4)

Juanma Menendez
Juanma Menendez

Reputation: 20229

If your problem is the Expo Go app is showing the wrong splash image (showing icon.png), that's a known limitation of Expo Go.

You can check the note there in the official doc, and try the alternatives they mention (use "preview build" or "production build")

https://docs.expo.dev/develop/user-interface/splash-screen-and-app-icon/

enter image description here

Upvotes: 1

Zorayr
Zorayr

Reputation: 24962

We have to decode their docs as always 😭

  1. Their template comes with a version of expo-splash-screen but it's incomplete and will not work if you update the image, so you will need to clean it up and start from ground up.
  2. Delete splash screen related properties from app.json.
  3. Install npx expo install expo-splash-screen. It may or may not be installed by default, lol, so install just to be sure! I actually think they started shipping it installed by default since the task is labeled outdated, so this maybe is not needed 🤷
  4. Configure it from app.json but using the plugin's config.
  5. Do a clean build before running, npx expo prebuild --clean, then npx expo run:ios --configuration Release --device
  6. You may still see a white default iOS splash in local builds; build via EAS (or test with production builds from Apple) to test the real flow.

Upvotes: 1

UncaughtDanError
UncaughtDanError

Reputation: 139

I fixed it by running npx expo prebuild --clean and then npx expo prebuild

Upvotes: 1

precey
precey

Reputation: 61

Run npx expo prebuildthen you can do npx expo run:android it works!

Upvotes: 6

Related Questions