Expo Prebuild Showcase: Dynamically Change Application Icons in React Native

hi everyone and welcome back to the channel Gordon chap here so in this video I'm going to talk about Expo pre-build and how you can create the IOS and Android native folders in your Expo project so uh so far I've been trying to stick with the EAS Expo application Services builds and like let it take care of everything for us because uh in the videos that I've had so far we could have added the plugins in the app. Json file and like uh if we were using something that really needed some um probably native code for example the most uh recent one was uh react n Firebase and we use plugins for that so that was easy to manage without having to go into the IOS and Android folders and make changes there but uh if you're building a real like a big scale application you're going to need to make some changes in those folders and uh do some native coding if needed so for that we're going to use this Expo pre-build that is offered by the Expo team and now uh this is going to as I mentioned generate the and this is going to create the Android and iOS directories uh for running your react code so uh I am on a Mac OS device if I do MPX Expo pre-build which I will show you soon uh it's going to build my IOS and Android apps but if you don't have a Mac OS you probably can only do the Android part which is again using some uh platform specific details that you provide here uh for example you'll have pre-- platform Android it will generate the Android folder for you but again uh if you're really thinking about doing uh a uh large scale scale application you probably want to be on a Mac OS and then do this uh pre-build for both IOS and Android so uh to Showcase how this works we're going to uh look at this react native change change icon Library where it gives us the ability to dynamically change the icon for the app so the user actually can pick using a selection of icons that we provide to them what the actual app icon on their home screen should look like so and just a quick intro to this video uh hopefully this will be something that you can take advantage of in your development Journey later on uh and I'll have more videos on this later as well uh please make sure to hit the like button below the video and uh subscribe to the channel if you haven't uh so without further Ado let's get started all right a few quick things before we get into the actual uh meat of this video so uh the starting code that you will see here is from my react n Firebase tutorial that I had so I'll put a link to uh the GitHub in the description box below the video I will also have a link to the final uh code that we're going to have at the end of this video in the descript destion box Bel a video uh so uh I just wanted to let you know that's what's happening and also uh we are using Expo development builds for this so I have Expo Dev client and I've uh explained this uh in my videos previous videos go check those out and I put links to those as well in the description box and up top here you'll see them appearing throughout this video uh so uh just so you know that's uh what we have that's the structure of the code so far I'm using App router uh well app folder with react with Expo router and uh also Tailwind CSS and the typescript so uh already there are videos in my channel that you can take a look uh to get up to speed with those uh the first thing we're going to do is to actually install this react native change icon Library so uh as I mentioned that's the uh the example that we will be using for uh explaining the Expo pre-build and all that so uh with the npx Expo install react native change icon command you can install that I've already done that and I have that uh in my package at Json so uh that's all I've done so far and the next step that we're going to do is to go back to the documentation here and uh follow the instructions so uh we already did the installation how to use part uh we need to have uh whatever icon that you want they're going with regular light and dark here and I'm going to follow the same thing but you don't have to you can have like whatever icon that you want uh and uh so uh I have those already uh in the folder that I have here so I have this icon dark icon light and icon Reg and I will share this video as well in the description box below the video uh so if you want to follow the video exactly as I'm doing you can do that as well uh once we do that uh we can go to this website app icon generator and then feed each of those uh PNG JPEG files to this and for each of them uh you uh only need iPhone and Android uh well because of the uh purpose of this video I'm just focusing on iPhone and Android for now uh so you'll feed it to uh this generator and it will generate 11 different files for iPhone and 4 files for Android once you do that what you will do for the Android you create an Android and you uh will see these five folders in the zip files that you will download for each of the icons and then in there for each of these folders you will go ahead and uh bring all those icons uh from the corresponding folder that you got from the zip file download a zip file into this folder uh follow naming uh naming convention that you like again following the way that they have done things in the uh read me of the uh re over here uh I'm doing dark light and just normal uh for each of these so you'll see the same fold file names for each of these uh different uh uh folders that I have for my Android for iOS also it will generate a folder for you uh in the zip file that uh you download and it will have uh these files in each of those for each of the images so uh you can uh basically uh copy and paste them into like your iOS folder uh I'm using the uh naming convention again that they have dark default and light corresponding to the original images that I had and inside each of these I will have the uh the corresponding files that were downloaded uh one thing to note as they mention in the documentation is that you need to uh adjust or update the content. Json file originally it will be as I mentioned here probably right here for iOS it's going to be assets. xcassets slapp icon. apppp icon set you will need to change that to images. XC assets and then for each of these uh different uh icon sets that you have you'll uh set the uh dark or light or regular as needed so uh let me go back here this was for my uh dark. apppp icon set for default my content. Json will have the default. app icon set with the images also over here and then lastly for my light uh I'll have the images. XC assets and light. app icon set so uh that's the uh update that you need to make to those content that Json files once you have those we have already done uh this step generate icon and prepare the icon file so I have my Android folder ready to go and I have my iOS folder ready to go as well with the way that they have set it up here and again this is just the way they have it with the dark light and uh default images you can have whatever like IC launcher image one image two image three 4 5 six and so on and then do the same with the uh the folder naming here kind of like similar to what I have here as well so with that let's go to the next step uh four is import the icons now here is what we need why we need the Expo pre-build uh we need to drag all of these uh folders into the map folders that we had over here to our Android um uh SLA Source main rest folder so uh we don't have the Android folder currently here uh and there are ways that you could probably do this without needing to create that using Expo uh plugins and modules uh but again uh the rest of the steps somewhere for example for iOS we need to make uh some changes into the uh in the X code we need to update something so that really is very hard to do without actually having the iOS folder and uh download and making the changes that they want here in the xode you will have to write some Expo pre-build uh code which is uh kind of difficult and I definitely didn't want to do that so uh again if you feel comfortable doing that maybe you could use XO plugins for this if not uh and in most cases it's just easier especially if you have a Mac OS and you are developing for iOS you can just uh go through this process of pre-build and then add these uh different folders to your folder structure and then make the changes in the specific Android and iOS files uh but again if you're building only for Android also then you don't even need Mac OS so I would just go with the MPX XO preu D- platform Android here and do the uh pre-built for that to create the Android folder uh one thing to note is that we are going to still use EAS for uh generating our development builds and also for production build and all that uh because it's much easier than you wanting to uh do this whole thing uh especially for production like pushing things to Android uh Google uh store and also Apple App Store and for the development you could potentially do the MPX expore onun Android and run iOS but uh it depends on your preference I would still build my development builds also with Es as well uh they do have a limit of 30 builds per month and like 15 for iOS but uh I haven't really hit that limit so far so uh you do have the option of building on your own uh devic as well locally using these commands and then uh one thing I wanted to mention is that we do want to use the bu pre-built IOS and Android folders uh when we do the EAS build and so we are not going to add these folders to our dog ignore or EAS ignore files uh because the changes that we are going to make into in these Android and iOS folders We want them to be included in uh the package if we just ignore these then it's like we didn't really need to add these in the project uh so with that uh just what I'm going to do right now is to do npx Expo pre-build so I'm just going to copy it and then uh over here in my terminal I'm going to do that again I'm on Mac device and so uh IOS and Android are both going to work on a Windows device you would probably can only do the Das Dash platform Android so keep that in mind might be other ways you can also install something on your windows and make the iOS also work which I don't think is really possible because how Apple does things but anyways at this point I'm just going to do the uh pre-build for both IOS and Android well with the first trial of MPX X for pre-build I got an error that was because uh I have my uh like I said this is a repo that I have done before with the react native Firebase so I have these Google services files basically and get ignore and uh I have added them to the secrets in the a XO application services website so uh for this to work I added the EMV file and actually uh the reference that I'm making to these two are defined in the app.config TTS file I've explained this before and that's not the uh topic of this video but in case you have environment vales or SEC secrets that you have pushed to EAS you would probably need to add them in the in an in aemv file don't forget to add the EMV and get ignore as well and then once you do that you should be able to do the MPX Expo pre-build uh so for that uh you can just like hit enter over here and uh I'm getting this warning here that's using the current versions instead of recommended react native 074.0 so if I go to my package.json file you'll see that my react native version is 741 so they want me to probably upgrade to2 so I'm actually going to do that I'm going to stop this process here I'm going to delete the Android folder that was already generated an iOS and what I'm going to do you will notice that they also made a change automatically this Android and iOS script was updated to Expo on Android and iOS if I revert this which was Expo start for each platform can save this and uh I can't just go and uh change the react native uh version to 74.2 because I have Expo and there are these kind of these versions are interconnected and so I need to use another command which takes care of all these dependency consistency and uh tells me what versions of these libraries are available so that is going to be MPX Expo install Das Das check so if I do this it's going to give me hey uh these are the uh compatibility issues that you might have if you like upgrade one of these so with the 74.2 for react native I also need to upgrade to the 5107 so it's going to make all these changes uh for me automatically so I'm going to say yes fix the dependencies for me and then it will go ahead and and make all those updates to my package at Json and install the new libraries so I've had this problem before uh I can uh actually do pseudo with this so you might not see this problem some kind of access problem so I'm doing pseudo here and then uh I need to give my uh password and then again here I say yes to this and then it's going to install the uh packages for me this time uh the versions should be also all updated over here once the installation is done and you can see that's happening and and we should be good if I do another MPX install check you'll see that everything is up to date now I can go back and do MPX Expo uh pre-build and remember I deleted the IOS and Android folders that were generated and I reverted this back to what they were so that we uh can do uh clean uh rebuild or for this one since this is our new uh our first pre-build you can actually use a D- clean even if you had the IOS and Android folders here and that's explained here uh with the clean addition to your command you can delete any existing native directory before generating but we don't want to do this in the future prebuilds once you do the first one and make changes to Android and iOS folders then you definitely don't want to do this uh and it's going to ask you uh your GI working is dirty whatever that's fine yes uh I'm good here uh I am using different branches so uh it's always good practice uh to use branches when you're making this major changes to your application so my MPX XO pre-build it work fine for the Andro folder and everything was fine for iOS I had some problems with uh the slipper it does POD install I'm on Mac uh with M1 chip so there are some issues with that and there are a lot of posts on GitHub and here and there about how you can fix that uh basically I just looked at some of those and then I am not even sure which one worked uh to be honest but I tried most of them and then the one thing that I realized for po install so MPX Expo pre-build and it goes ahead and installs creates these Android and iOS folder once it gives you the Pod install error uh you can actually uh keep whatever you have and then uh C into the iOS folder and when you do that here you can uh do some my problem mostly was some access issues so I had to do some uh pseudo like CH I'll show you now here shod uh so this pseudo shod some like kind of um permission problems that I had in the folder so uh I did that uh and uh then after that I did uh uh mp uh pod install with repo update so that was pod install with D- repo Das update so that worked for me uh it kind of uh messed up a little bit of my G stuff over here but uh I mean I did have another Branch so I just push that Branch everything and uh seems like everything is working fine so what I would do I'll go back outside the iOS folder right now uh with the Pod installed done I should see the Pod file. lock here and and uh with the the command that you ran you hopefully didn't see any errors otherwise I put some links in the description box below the video uh just Googling stuff also works uh but anyway so uh we are done with that step The Next Step I'm want to do iOS first so uh we have the icon files ready right now and so and the next step is to drag all the files that we had under iOS our app name images. XC asset so have my iOS and then my app name is RN journey and I actually already dragged those three folders dark default and light folders that I had with everything in them under the image do images. XC assets and remember we change the content. Json over here to images. XC assets that was why we did this cuz right now that's the folder that we have and we did that for all these three the next thing we need to do for iOS is updating our infut aist file so I'm going to go to my iOS folder and then right there um inside I believe uh my project I should have my like project name I should have info put a pist file and you can scroll all the way down and right before this uh closing dict over here you can uh add what I have here and I'll explain what it is it basically is a copy of what they have in their example info pist file so I go here and then everything here starting from this key CF bundle icons we are basically assigning uh our dark and light to our alternative icons with the um app icon dark and all the required things that we need to app icon light over here and then for the default one we have this primary icon uh which is going to look for the icon in the default app icon so uh that's the first thing we need to add so basically I just copied everything from here all the way to down here and then paste it right below what I had here in inut pist file so I'm going to save that and then there's one more step and again this is a iOS stuff so you need to be on Mac and for this you actually do need to open xcode so uh open X code and then once it's open you can open existing project and then when you do that you can go to the iOS directory of your project and then click on the xcode project project file open it it's going to open the project in react in xcode and under this General Tab while you select the project over here go to uh General scroll down over here under app icons you will see app icon this is what I have already changed so what you will see is this app icon and this unchecked so you will move change this to default so that's a default app icon and you will check this to include all app icon assets that's it it automatically will save it for you you can close out of xcode the next thing we need to do is to do our uh build so you have two ways since we have the pre-build and we have our IOS and Android folders ready we could technically build locally you can still build in uh using e so I believe that's EAS build D profile development D platform for well it will be iOS and that's what's coming from again our e. Json file that we have for profile development for internal U uh we can use that actually you could do like development Simulator for iOS so uh for Android it's development for iOS it should be development Das simulator and then D- platform iOS uh that's one way and this is going to build it in EAS on expo. dev website one thing to not is that for example in this project I have my Google service info pist file over here which needs to be included in the iOS directory uh because it's not the when you do this in EAS you'll see that it's going to skip the pre-build so one thing I forgot and this is a fa failed build you can see is that this is going to use the Android and iOS directory that you have here and it's going to skip that pre-build step on E so uh it was looking into my app. Json file and for the uh Google services for example for um Android if I can find it over here and you can see that we have an empty string and this was because we have added that as a file to the E Secrets but since we have the built uh Android and iOS folders here uh that's not going to work so I needed to add this uh SL Google service over here so uh if you're doing es build then uh basically Expo application Services you need to uh fix these secret things that you have uh or else like I said you can do the es build on your machine locally so for this I am going to uh let me just type it clear so it's going to be what we actually saw here in the uh e doc Expo documentation it's going to be npx Expo run iOS this is for iOS now I have already ran that and uh it will go through a lot of steps maybe a few minutes and then you need to have an an Android emulator uh iOS simulator or your actual physical iOS device connected to your um laptop so that it can build it on a device without that it's not going to uh work you need to actually have that uh connected and then once it was done it actually installed it you can see it here this is the default icon that I had and uh exactly from this default folder so this was the default icon maybe a bigger one here yeah and that will be the first icon that will be shown on the screen for you now we are using development builds obviously so what I need to do to start my um application here my server is npx Expo start D dd- client so I'll do that it's going to start and then uh when you do the MPX Expo build uh XO run iOS it will also start the server right after it installs the uh app on your um either physical device or the simulator over here but I had to stop that server so here I'm going to hit I key it's going to open my application over here now it's up to you how you want to change the icon um you can have a list wherever people can choose icons and the next time they see the app that icon is going to change but the code is actually very simple if you scroll down under documentation all you need is actually just import this change icon for example from react native change icon and call the change icon and use the name that you use so we had light dark and default all with the first letter capitalized so I have this profile page over here where uh we built it previously for theming our app Dark theme light theme and uh this might not be like the best use case for three icons probably two would be the best but um I'm just going to show it because we have this already in place so under the uh protected WS I have tabs and then profile this is XO router as I mentioned earlier so over here I can import to change icon cuz that's what all I need to change the icon and then when I change these the theme I also uh select the icon that I want based on the theme value so if it's dark I select the dark icon if it's light I select the light icon and if it's syst I'll keep it as default now keep in mind that with system here uh we actually when we open the application it will take the theme of the system uh if it's dark it will be dark if not it will be light but the app icon is not going to change as the theme of the device changes while the app is closed so and that's something maybe you will need like a background procedure like running in the background when your app is closed or something like that but right now the purpose is just to show you hey this is how you can choose the app icon so for example if I save this right now I'm going to reload the application and what you see here right now I have the default and then let's go here uh I haven't changed it so I know it's set as light but if I click another time on this slide it's going to tell me that you have changed the icon for R Journey this is something automatically shown I don't think there is a way around it so uh we're just going to say okay here and if I go out now this is our light theme um icon so if I go to light this was the light and then our default was the one that we had before and then the dark is this xfit over here so if I go back in change to dark says it's changed and then we go back out and it says Chang as you can see system should be default it's going to change to that and then there we go default so let's say I want to go back to light I close it app completely and it's going to be in the light as we had it if I open it the next time then I can go ahead and change this so obviously right now these are uh the selections that I have based on for the theming of the app not necessarily the icon name so as you can see like if I uh this this might not match as I open the app with the icon uh but then they have this get icon as well you can do a um for example use effect hook or something to get the uh icon when you load the app and then uh set this based on that so uh like for example if you had a list of icons here you will make the selection based on the icon and that is displayed currently on the home screen so again if I close it in the dark more it's going to keep that icon for me so that's mostly for the iOS again the tricky part here was for me actually doing the Pod install on the iOS with the pre-build uh then other than that just keep in mind that your secrets you might uh have to make sure that they are already included somehow in your iOS folders and you'll see that in here in my R journey I do have the Google services the PS file this is there for the uh build but as you can see it's not going to be um it's going to be ignored and not going to be pushed to get so that's something to keep in mind all right that was the iOS part now for the Android part similar process I'm going to stop this all right let's quickly look at Android now uh for Android uh we have also a couple of things that we need to do first thing inside our Android project under the app folder Source Main and then res you probably already will see a few mid map files over here what you would need to do is to replace the contents of these mmap htpi and so on with what we already downloaded for for our app icons so I've already done that if you remember we had dark dark light and just like the IC launcher PNG files for each of them and that's what you will see here and there is also this one folder that's been generated any DPI when we did the uh MPX pre-build so uh we do need to get rid of that one so I'm going to delete that and then once that's done the next step is to make some changes to our android. manifest.xml file which is under Android app Source main folder so again we're following the steps from this documentation here I already copied the uh icons over here under the Android directory and then we need to make some changes to Android manifest.xml file so if you open that you'll see that we need to make some changes here as mentioned in the documentation they have an example manifest. xtml file here so I basically copied most of that and so just so you know what has changed I'm going to show you we have this application over here here just the uh props on this application is kind of uh we have some changes there and then the next thing is that after this activity that we currently had uh we keep the uh main activity and then we will add these activity aliases here the way that they have shown over here so I just copied all these three aliases which are uh corresponding to the light default and the dark uh images or icons that we had so I've just copied and pasted them over here H and then I can save it now we should be ready to start uh uh to run our build before that I've already done it a couple of times so one error that I was getting was what's related to this one saying SDK location not found when I did MPX X4 on Android and to fix that Al a link to this U stack Overflow post what you need to do is to create a local. properties file right inside your Android uh folder so here local. properties and in there it shows you that for example for Mac users you do like like users username Library Android SDK and that's what I have added in this local La properties uh this should be already get ignored if not you should get ignore this it's just uh something that you don't want to uh push when you're doing your EAS build in the um basically uh Expo uh application Services Vu or for example do build pro production if you wanted to do the development also using that uh but I can do the development build over here so I'm going to do npx Expo run and Android and then while I'm having my emulator open or you can also connect your own Android device to your laptop and this is going to take much faster than it would for you guys the first time you do it since I've already done it most of the process has been cached and so once that's done it's going to um open the application on my uh emulator over here and you see that uh it's just building the application right now once the application is built I want to show you something right now if you look at your emulator you'll see two uh apps generated and there is a an issue on the website as well I'll link to the to this issue on GitHub rep me uh that uh people are also getting like duplicate icons here uh what I'm not sure what's happening but if you guys someone knows uh please comment in the comment box below the video but I have this now and then I can actually uh run the application on this emulator you will see that uh first uh I need to log in by the way this is the Pro that I implemented in the react native Firebase video that I did uh on profiles here if I click on dark you will see that one of these actually Chang the uh icon if I go back and let's do uh light again here you'll see that this one changes so uh I'm not sure what's happening here this is something uh probably might have something to do with this Android manifest setup that we have over here um there were some comments about having all these activity alas the enabled false were all of them I tried that that didn't work there's also a uh piece a step in uh the documentation where they say you have to remove the launcher intent from the main activity and that's referring to this main activity over here this one I tried removing it and it was uh not even running the uh Expo uh run uh Android command so it was thrown an error and so uh there might be some problems with the most recent react native 74 version with this library but uh anyways the whole point of this video it's kind of to show you how you can use Expo preu and make changes in the uh IOS and Android folders as needed for your project so hopefully you learned something and again I keep an eye out I'll try to see if I can find a solution for this and I'll definitely update the code if I find something on the GitHub repo that you will also find in the description box below the video all right hopefully you enjoyed the video you learned something new and uh please make sure to hit the like button subscribe to the channel and uh don't forget to turn the notification Bell on as well uh I will be posting uh videos regularly so uh I'll see you guys soon

Channel: React Native Journey

Views: 130

Keywords:

Id: T7ybGL5HUhI

Length: 30min 31sec (1831 seconds)

Published: Mon Jul 01 2024