How to make App Icon variants with Expo

To begin with, I need to sadly say that this doesn't mean switchable ones in production. This doesn't seem to be currently possible in managed Expo projects. This guide is to change your App Icons to more easily tell which version you have installed, be it a development build, using the Dev Client, a production build or anything between!

The goal is to have something like this: Two app icons but one is shown for production and the other is shown for, in this case, the Dev Client.

This tutorial will be heavily linked to the official tutorial for Installing App variants on the same device by Expo here: https://docs.expo.dev/build-reference/variants/.

For this guide, we will be using the great: ENVIRONMENT VARIABLES! I wonder how many others underestimated how great these are to use.

Remember to have a backup of your project first, you never know what could break as we're also going to convert our app.json to app.config.js to help it be more dynamic, which is pretty cool. Not gonna lie.

Feel free to follow the guide that I linked to. We're more-or-less following it directly.

Here's the link again, if you've forgotten: https://docs.expo.dev/build-reference/variants/.

Come back here when you get to actually setting the environment variable.

Done it? Awesome!

For the sake of simplicity and consistency, I've renamed the variable to IS_PREVIEW and the Environment variable text to "preview".

New find where you're setting the App Icon, it should look something like this image:

Change it to look like this:

Now, hopefully, you already have an extra icon that you've set there. Remember, with this sort of expression, the left of the colon is true and the right is false. So, if IS_PREVIEW is true, which it will be since we set it earlier, it'll return our Preview/Dev icon. If it is false, for example, you're building for production, it'll return your standard icon.

All that's left to do is make a build of your app.

Make sure to select your profile. For me, it's "preview". I'm also, building for iOS as it's my main dev platform.

The command should look something like this:

sh
1eas build --profile preview -p ios

When that's done and built, you should be able to install it and you'll have something similar to the following image.

As you can see, I have two apps installed, seemingly the same, but with different icons. The fun thing is: they are the same! By following the guide I've been linking through this post, you can do it too! You just have to do the exact same thing as in this post but change the bundleIdentifier field, for iOS, and the package field, for Android.

Here's that guide again, for reference: https://docs.expo.dev/build-reference/variants/

---

I hope this guide helped you. If it did, please consider supporting me on Ko-Fi at https://ko-fi.com/rhyce.

Or check out some of my other posts like Getting App Version with Expo and React Native (Updated) or, if you're a game dev too, you could check out Controlling what happens on Fell Out Of World in UE4.

Thanks for stopping by.