Splash screen and app icon

Now that we're using a development build and not Expo Go, it's definitely time to customize the splash screen and app icon.

Previously this would be a long and cumbersome process of generating the right sized icons for iOS and Android, and configuring them within Xcode and Android studio. But luckily for us, our native projects are ephemeral because we're using prebuild! So all we need to do is configure the updated assets in our app.json, prebuild and rebuild!

The easiest way to create your own app icon and Splash Screens are in an editing tool such as Figma. They need to be a specific size. It's handy to use a Figma template to make sure you get the sizing right (or inspect the file size of the files shipped in the default template).

I've created some assets for us, so feel free to either create your own or use these.

Splash screen

The splash screen is a 1284 × 2778 png. It will be displayed when your app first launches while the app is loading.

Replace the existing assets/splash.png with this one. The image is passed in the app.json expo -> splash.

App Icon - iOS

The iOS app icon is a 1024 x 1024 png. No transparency.

Replace the existing assets/icon.png with this one. The image is passed in the app.json at expo -> icon.

App Icon - Android

The Android app icon also a 1024 × 1024 png, but it is expected to have either transparency or a solid background. This is to make it look good in various launcher home screens.

Replace the existing assets/adaptive-icon.png with this one. The image is passed in the app.json at expo -> android -> adaptiveIcon -> foregroundImage.

Notice that we can also configure the icon background in the app.json. It is currently set to white which is a good default for us as well so we'll leave it be.

Favicon - Web (optional)

For the web, we have a 48 x 48 png. Passed in the app.json at expo -> web -> favicon.

App Name

While we're at it, let's also update the app display name. It is currently plantly but I think app names look nicer when they start with a capital letter, so let's change it to Plantly.

Update: app.json

@@ -1,6 +1,6 @@
 {
   "expo": {
-    "name": "plantly",
+    "name": "Plantly",
     "slug": "plantly",
     "scheme": "plantly",
     "version": "1.0.0",

Rebuild

Now that we've done the chances, run prebuild to regenerate the native projects with the new icons:

npx expo prebuild --platform ios --clean 
# or
npx expo prebuild --platform android --clean 

Prebuild clean

If you already have ios and android projects (even if they're gitignored) when you want to rebuild the native projects, run the prebuild command with --clean. This will make sure the project is built afresh.

Finally, rebuild the projects with

npx expo run:ios
# or
npx expo run:android

iOS Splash screen not updating

If you're running on an iOS Simulator, it might happen that the splashs screen doesn't update immediately. This is just due to caching: close and reopen the simulator and if that doesn't work, uninstall and rebuild the app.

Checkpoint

Android	iOS

Checkpoint

✔️ Update app icon, splash screen and name

Prevent Splash Screen Auto-Hide

The splash screen automatically hides when the app is ready. But you can prevent it from auto-hiding by calling SplashScreen.preventAutoHideAsync(); in a root layout file. (SplashScreen is an export form expo-router.)

Then you can so additional things in the background if needed, e.g. check the user's auth state, redirect to a different page etc, and only call SplashScreen.hideAsync(); when you're ready.