Set App Logos, Launch Screens, and Icons in React Native

[00:00 - 00:12] In this lesson, we'll look at how to set the app icons, the launch screens, how to put images on the native side and then use them in React Native and also how to set the tab by icons. We'll also look at how to use badges.

[00:13 - 00:27] For icons, there is one common practice in React Native. You generally upload three versions of any image and they're called at the rate of 2x, 3x and a simple name.

[00:28 - 00:51] Now these are three different versions like let's say we have a base image that has a resolution of 22 by 20, the 2x will have a resolution of 44 by 40 and 66 by 60. In a lot of cases, just uploading the 3x version works and app is able to render that by scaling down or lower it and devices.

[00:52 - 01:01] Except for tab bar icons in this, we are supposed to be uploading all three versions and there are two parts to it. One is an inactive state and one is an active state.

[01:02 - 01:10] We'll look more into how to set all of these in going forward. So let's get started.

[01:11 - 01:27] To set the iOS icons, we can open the project in Xcode and then go to images.x esets folder and then click the app icon available here. It will show all the icons that we need to upload with the sizes that they need to be.

[01:28 - 01:37] So it's pretty intuitive from that perspective. Alternately, we can paste all the images inside this folder that we can find in the project.

[01:38 - 01:51] If you go to iOS, Friday app and we'll find images.xesets and then app icon, we can put everything inside this and then that will also pick up. So let's try using Xcode.

[01:52 - 02:04] So that's there's the project. Remember to open the workspace file and then if you click on images.xesets, app icons, these are all the icons that we need to upload.

[02:05 - 02:17] Now you can have one large image and you can generate all the different sizes that are required. There are a lot of tools available just search for app icon generator and you 'll find it.

[02:18 - 02:25] And I opened the first one and used this tool to create the icons. So I already have them created.

[02:26 - 02:38] As you see, this is the same folder that we need to upload and these are the different sizes. So let's try uploading them.

[02:39 - 02:50] Now the good thing about this is if you upload a wrong size, let's say that we are supposed to be uploading 60 by 60, but we upload 57, it'll give you a warning that. It should be so that that's good.

[02:51 - 02:55] It's harder to make mistakes that way. So let's just upload these.

[02:56 - 03:22] We need 88 and then 87. And then we just run and build and run the project and the icons should be set.

[03:23 - 03:30] That's quite easy. Now if you go to back to the project, you see all these icons have actually been put into the same folder.

[03:31 - 03:39] We just want difference that earlier this content.json, it did not have the file name. So if you plan to do it manually, just add the file name attribute to it.

[03:40 - 03:48] You can keep any name. It's not necessary to keep it as per resolution.

[03:49 - 04:02] And there we have our app icon. So just one thing to remember, don't keep any transparency in these icons, especially on the edges.

[04:03 - 04:24] If we do that, then while launching the borders, they'll show up in black colors, having a black background and that won't look nice, especially while launching and also while closing an app or setting it to home again. Next let's look at Android.

[04:25 - 04:30] For Android, we have quite similar options. One is using the Android Studio.

[04:31 - 04:48] We can open the Android folder inside the boilerplate code, the root folder, this one in Android Studio and then right click on the res folder that is the resources and then simply select image assets inside new. This will open up a wizard.

[04:49 - 05:00] Right here it will give the option to select one image. It should be at least of the size 512 by 512 and the wizard will automatically create the rest of the icons for the app.

[05:01 - 05:09] Alternately, we can also put all the images, all the different icons inside the res folder. Now here it's a little different than iOS.

[05:10 - 05:19] In Android, we have a map map folders. So it will be map map hyphen mdpi, hdpi, xhdpi depending on device resolutions.

[05:20 - 05:28] So we need to put different size images inside these. So for mdpi, it will be 48 by 48 for hdpi to 72 by 72 and so on.

[05:29 - 05:34] So as we see the options are quite similar to iOS. Let's try doing this using Android Studio.

[05:35 - 05:49] It's a simple way. So we just open the Android folder in Android Studio, right click on res, new and then we select image assets.

[05:50 - 06:01] And then currently showing the default that comes bundled in, we can just change the path of the image. So we'll select a large enough image.

[06:02 - 06:15] So this is 512 by 512, just select it, it will automatically create all the different resolutions required. Again remember, don't put anything transparent unless you absolutely are sure about it.

[06:16 - 06:29] From here we can click next and then just finish. And this will automatically set that image as the apps icon with necessary sizes.

[06:30 - 06:43] Let's try and load that. So after uploading the image and clicking finish, I just build and run the Android project.

[06:44 - 07:02] And let's check the icons and there we have it, right? If we check the Android folder, then we'll find that it has already created those different images for different resolution devices.

[07:03 - 07:09] Let's look at setting the launch screens. Now launch screens are not supported by default.

[07:10 - 07:29] For iOS, they do have a launch screen and it's a text that says powered by React Native. I've changed that in the polypate code to have a single image and simply replacing this image at the same location that XC assets is going to work for iOS.

[07:30 - 07:37] For Android, it doesn't support any launch screen by default. We have to create a new screen and add it to the project.

[07:38 - 07:53] And then on Listing for NVC, please swap the splash screen with the React Native default screen on when the bundle loads. So let's look at setting the launch screen on iOS.

[07:54 - 08:04] We again go to App and then Images to Text YC assets, the launch screen. Now this is a part of the polypate code, remember, and simply replace the launch screen images.

[08:05 - 08:09] So I've already created a new image for iOS and Android. So we'll just put that.

[08:10 - 08:28] So this is the 1X image, the 2X and the 3X image. Now from here, we just do Yarn iOS and we'll have the new launch screen that we just set up.

[08:29 - 08:51] There we have it, the new launch screen. For a better user experience, a good practice is to have some kind of continuity between the app icon and the launch screen.

[08:52 - 09:01] Like, we should not have a blue icon and then a green launch screen. There should be some continuity in color, it just makes for a better user experience.

[09:02 - 09:17] It feels like the app just occupied the whole screen to launch. Now for Android, we'll just put the largest image inside the tribal folder.

[09:18 - 09:32] So ultimately, we could also put all the different resolutions. Like, if you go inside App, SRC main res, there's a tribal folder, you could put a single large image over here or you can have those different sizes that we mentioned earlier.

[09:33 - 09:45] X, X, G, P, and all this. So the tribal hype and X, S, G, P, I, we'll just take the largest image that we have and we'll just replace the existing one with it.

[09:46 - 10:16] So currently it's this one, let's just delete this and we'll name it launch screen the same as before and now we'll simply build and run the Android app. Now remember, whenever you make any change on the native side, on iOS and Android, you have to stop the complete application and start it again, either from terminal or from the studios.

[10:17 - 10:28] Changes in the reactive are reflective, but any change on the native side requires a complete rebuild of the project. So let me just do that and come back with the launch screen on Android.

[10:29 - 10:45] So the emulator has started, let's just launch the app. Change the launch screen and then once the app boots, the launch screen will move to the splash screen.

[10:46 - 10:58] The tab bar icons need to be set on the reactive side. It's along with the reactive navigation.

[10:59 - 11:07] Let's look at that. I have already added a few icons for the different tabs that we have.

[11:08 - 11:17] If you recall, we had the home tab and the card and the search and the profile tab. So there we have different resources.

[11:18 - 11:29] So we have a default image and then a 2x and a 3x similarly for home for profile and for search. If you notice, we have cart and then cart and resource active.

[11:30 - 11:51] So these are basically two images to show that a tab is active. So if you go to our navigator and then we just scroll to the part where we configure this so we can set an icon and we can also set a different icon for to display that the tab is active.

[11:52 - 12:12] You just remember these need to be of same sizes. So if cart source is of 22 by 22, the cart active and all the other images that we're using the tab bar need to be of the same size and the 2x and 3x, they go quite similarly.

[12:13 - 12:22] So if we have a 20 by 20, we need to have a 40 by 40 for 2x and a 66, 60 by 64, 3x. So tab bar requires all three images.

[12:23 - 12:37] So we can't just put a 3x image and and assume it to work. So that's something that required and again, like app icons, we can find a lot of tools online where we can put just one image and it will convert all those different sizes for us.

[12:38 - 12:46] So let's try and set these. So we have our home and then we have cart and then we have profile and we have search.

[12:47 - 13:02] So we have home, we have search, let's just do that. Search, let's also start the app.

[13:03 - 13:10] This needs to be done only once because we're doing it on the reactative side. So doing it for iOS, we'll also make it happen for Android.

[13:11 - 13:52] So this is cart, we'll just do cart and we'll do cart underscore active for search, index underscore active and then we have profile. So profile, profile underscore active.

[13:53 - 14:06] Let's just save that and that should work for home. We only have one image and plan to use a selected icon color for that.

[14:07 - 14:14] So let's just do that. We'll do a typography dot color dot.

[14:15 - 14:21] Let's just do morning for now. Save it and let's check.

[14:22 - 14:30] So we have our home icon, search icon, cart and set exactly. We can also change the color of the text and icons if you want.

[14:31 - 14:39] Like if I use something else over here for selected or for default, it will start showing up that way. Okay.

[14:40 - 14:42] Default is white. Let's not do that.

[14:43 - 15:08] Let's do default selected and yes, even the selected one comes as black. So for search, it has replaced the icon, but I think we also have selected icon color and that is why it's also showing that.

[15:09 - 15:14] So let's just comment that out. We don't want that for all of them.

[15:15 - 15:27] So my bad. So that's nice.

[15:28 - 15:37] As you can see, it supports colored images. We can also do that transition between a black and white image and color image in case we want that.

[15:38 - 15:48] Let's try that. Just save it and if you load automatically, we'll have to comment out this little icon color.

[15:49 - 16:19] So yeah, so in case you need that, that looks pretty neat to write. Now let's say if you want to have only the icons and no text in that case in this text attribute, simply set this as empty and we will have only the icons.

[16:20 - 16:33] So it also supports other attributes like font family, font style, font weight in case we want to play with that. You can also set a different font face that is font family for it.

[16:34 - 16:53] Now, like I said, the changes only need to be done once is we're doing it in React Native so the Android icons have also changed. With that, we have looked at setting the app icon, the launch screen and setting the tab bar that starts giving a shape to the app.

[16:54 - 17:01] There's one more thing here if we want to use some image from the native side. So that process is quite simple.

[17:02 - 17:10] We just upload the image on the native side for iOS. It again goes back to this images dot XDS sets.

[17:11 - 17:23] We just right click here, add a new image, add the three variations or just one . But remember to have the largest one and to refer it, we only call the image name.

[17:24 - 17:41] We don't call the full path, we just call the image name and we'll be able to use that inside the app. Similarly for Android, for Android, we put everything inside the Troyable folder.

[17:42 - 17:53] If you remember from the icons app launch screen part, just put it there. If you want put only the largest one and then we can again refer it simply by name and it will work.

[17:54 - 18:06] Remember, these images are on the native side. So to change these images, we actually need to release a build and this will not work over the air with React Native bundle.

[18:07 - 18:25] So that choice needs to be made if you if the images are changing frequently, then it's better to put it on the React Native side inside the assets folder. And if it's a some kind of a launch image or a marketing image that you think it's not going to change that frequently, put it on the native side.

[18:26 - 18:31] Apart from the launch images and icons, they go in the native. So if you want to change that, we have to do an app.

[18:32 - 18:56] For that the tab bar icons, although can be changed from React Native. So let's just put an image on the native side and use it, which is good to our project folder, XDS sets and here we can right click and create a new image set.

[18:57 - 19:07] So let's call it sample and here we upload the three sizes or just the largest one. I have a sample size here, sample image here.

[19:08 - 19:13] So I just upload it. Now remember, we're calling it sample.

[19:14 - 19:29] So if you want to refer it, we have to refer it by this name. So let's just go to home component and let's use an image.

[19:30 - 19:54] So we just copy this over and we'll say source. So the new RI is sample.

[19:55 - 19:56] Let's start looking at the native. Now remember, this is a native change.

[19:57 - 20:07] So we have to actually build the whole project and run it. Otherwise the React Native app will not be able to find this image.

[20:08 - 20:12] So let's go to the app and okay, we need to put in a size. Otherwise this won't work.

[20:13 - 20:17] For now, we'll reuse that and there we have our image. This from the native.

[20:18 - 20:29] Just remember, while making these changes, it tends to happen that we add the images to one platform and forget it for the other. So just be careful of that because this is this common code base.

[20:30 - 20:44] So now it will also look for the sample image inside the Android app and we need to put that inside the drawables folder for Android. So just put the largest image and that should be good.

[20:45 - 20:51] So last, let's look at the badges. So these are the notification icons that we see.

[20:52 - 20:58] We can put them, we can use them on the navigation bars. Like let's say that we have a pending action on settings.

[20:59 - 21:09] So we can store the particular value that we want inside state or async storage and then we can just populate it for now. Let's just populate it manually.

[21:10 - 21:15] For that, we need to set the badge. It takes a string.

[21:16 - 21:37] So we'll just put one and for badge color, we will do typography dot color dot warning, save it, reloads and we have our badge. It's a string so it can take anything.

[21:38 - 21:39] So it's flexible that way if you want to do it.