Expo Fonts, App Icon and Splash Screen (dark/light mode)

hello everyone and welcome back to the channel Gordon chesap here so in this video we're going to talk about loading fonts into your uh react native application and also uh in conjunction with that we're going to talk about splash screen and adding icons to your app uh splash screen and loading fonts basically go uh shoulder by shoulder because uh uh when you're loading your fonts it's a good practice that you do that while the splash screen is showing to the user basically that helps you with a bit better user experience and uh uh one of the things that we're going to take care of also is making sure that our splash screen is uh configured for both uh um dark and light theme as we've worked uh uh through our past videos uh basically adding light and dark theme to uh the application uh we also going to use that for our splash screen as well so that it dynamically picks up the theme of the app and uh show the proper splash screen so with that let's get started first order of business here uh we're going to take a look at some Expo documentation starting with Expo splash screen over here uh I'll put all these links in the description box below the video and also at the end the code to the link to the uh GitHub repo will also be in the description box below the video uh so as for the flash screen documentation uh you'll see a couple links over here that uh they will help you basically create a good splash screen and also generate icon I have used this link here to uh actually create this SC splash screen and icon for and the application that I have in production so feel free to take a look at that uh but that's outside the scope of this video I already have a splash screen and icon that I will be using and also there is this generate like a link to generate icon and slash screen here uh I can get this to work but if you want to you can give it a try and generate some random uh icons that you can use uh but uh basically here uh in the documentation they're telling us that we need to install the Expo flash screen and some configuration and so on and so forth uh we're not going to do that the reason is that we are uh the application that we have been working on so far we have set up Expo router and with Expo router there is actually a more straightforward way uh to do this uh um we'll get to that in a minute so once you created your Splash screens and icons using either these videos or if you have a designer or anything uh you we can go back to uh our app uh which by the way again the starting point for the app uh is also on GitHub uh and uh this is the end of uh the code that we had at the end of previous video uh so uh I also need to let you know that we have used the Expo Dev client to basically create build de uh development builds uh using the Expo application Services again I'll put a link to that video as well so you can go check that out cuz uh we are going to uh use that in this video as well uh to build uh a uh development build and then test everything on that uh with the way that we are doing things with uh light and dark theme for our splash screen uh I uh think I have read that it won't work if you're just testing things on XO go uh it might work on production but definitely with the uh development build that uh the way that we are going to do things we should be able to S to see uh both of that basically light and dark Mode work well with the development build so again this is uh what we have already Incorporated in the app and I'm starting from uh that uh code base uh once you have your splash screen and icon you can go ahead and add them to your assets folder as you can see here we have assets uh for Android you need to have an Adaptive icon again in that video over here they explain how uh you need to create that and then uh for uh iOS just like an icon this is again something from uh my production app that I'm using and then uh this is also what I will be using for the splash screen uh so these are our assets already I put them in the assets directory in order to let the application know that uh uh we want to um have different uh uh kind of like background color and that kind of thing for our light and dark mode we need to come to the app. Jon file and then uh make some changes here uh to let the uh application know what files and like what kind of colors need to be read for either dark or light mode in iOS or Android so if you look at the app. Json file you'll see that I have this flash uh section over here that's where uh this flash.png is being read and uh also right now background color is set to uh white color but uh we're going to add a few more things to it now uh to play safe I'm going to uh basically set up the dark mode in here first but then we will also specifically set that up for our Android and iOS over here as well so for the dark mode I'm still going to use the same image but basically you will add this dark uh key over here and then dark property and then add the same image uh resize mode and background color to that I'm going to use the same uh splash the screen it's basically this thing over here the rest is going to be the background color that I will assigned to it so that's going to be a dark color for the uh light theme it's going to be white color uh and so I'm going to do the same thing for my IOS and Android for uh Android uh uh properties over here as well so you can basically copy this whole thing over here uh and then paste that for IOS and Android so add a comma here after uh bundle identifier or whatever you have here and then add that uh to your uh iOS uh section over here get rid of this final uh comma and then we do the same for Android as well so we are going to add a comma again over here after package name and then and paste what we had over here making sure to get rid of that extra comma over there and then we can save it so with that the setup for our IOS and Android for dark and light theme for the splash screen should be uh good we also uh added this icon. PNG that is already uh being uh basically added to our whole application through this icon over here and the Adaptive icon over here is going to uh look for this adaptive icon as you can see and then take care of the icon for our Android devices as well I'm not going to build this uh uh right now just create the development build we're going to go to the next section and add the the splash screen as well well as font actually to our application and then once we're done we'll create a build and uh test the the uh splash screen and font on our iOS simulator and Android emulator all right let's talk about fonts again looking at the Expo documentation they have a section about fonts you can read through this about adding costom fonts but we what we are going to do is actually looking at the uh using Google font so for that we need to install Expo font and Expo Google fonts whatever font that you want to so uh for me I'm going to bring in the uh EXO font which we can find that on Google right here you can see that under the fonts. google.com link you can actually search for any f that you want I'm going to use this EXO font uh I know in the documentation they're using enter but we're just going to do something different uh so that you can see how you can uh bring your own uh selection of Google fonts uh so with that we do need to copy this whole thing here and I'm going to paste it but like I said I want EXO icon EXO font so that's what I'm adding here and then enter and let that install go through all right once that's done you should see Expo fonts and also your Expo Google fonts whatever font that you selected over here so with that we're good um again there is some uh details about how you can add this uh the icon to your uh the fonts to your application and uh we're going to take care of that in our layout. txx file which is our the entry point for our application since we're using Expo router so over here I'm going to bring those uh fonts in so I want to use uh my uh 400 regular 700 bold and 900 black fonts over here and also we need to bring use Font as well from the uh Expo Google fonts and for now we're just going to uh keep it like this I'll get back to this a little bit later uh cuz uh we want to make sure that uh the setup that we have for splash screen and fonts kind of uh work together uh perfect so that when you're loading the application when it's just the application is being loaded uh the f once get loaded while the splash screen is being shown to the user so for that there is actually a uh another documentation for that specific thing so uh again I put the link to this uh page this in the description box below the video since we are using Expo router Expo router they say that it extends Expo spash screen that's why we didn't actually have to install this Expo slash screen over here and then uh the reason is that it's it's actually going to prevent a white flash when you open the app even if you have a dark mode you might see a white Splash before the splash a white Flash before the splash screen is uh shown so in order to get rid of that they recommend that uh we use uh this method with the expor router and there is also an issue or a discussion point on the Expo router uh GitHub repo and uh if I scroll down here here you can see that Evan bacon actually I guess the creator of expor router uh he has uh mentioned three steps to get rid of that white Flash and we're going to use his code over over here to add our fonts and splash screen so uh what I'm going to do is uh I'm going to kind of follow the same thing I need to bring splash screen from Expo router uh in my layout. TSX file as well so I have that over here and then the next thing we want to do is to add the splash screen. prevent autohide acing cuz we don't want to uh Auto hiide the splash screen we want to uh kind of the idea is while the font is being loaded we want to show that splash screen maybe set a timeout of a couple seconds and then uh just hide the splash screen and go to the application and that's basically what he explains here uh so uh going back to our layout. TSX file I'm going to now uh bring in my font so what I have here is this code uh we're going to uh use this use fonts hook to see if and when the fonts are loaded or there is an error so uh I am bringing all those three fonts 400 regular 700 bold and 900 black over here so once the this is uh basically um executed we will know that the fonts are loaded or if he had error so again uh following his instructions over here uh we're going to also use kind of a uh set time out with use effect so with that I'm going to add this other use effect over here uh which is looking to see if fonts are loaded or there is an error then we're going to uh set a time out of maybe like 2 seconds to uh then hide the uh splash screen so uh that's what we are doing here and then what uh we'll do is basically if uh uh we're going to prevent rendering until the font has loaded or an error was return so as you can see here uh we will be returning null otherwise uh it will go through the rendering of our application once the fonts are loaded and uh there's no error so we're good there uh it's a little bit different from what he had over here uh because we're also looking at the font error uh and that's coming from this uh snippet of code that we have here in the documentation uh the only difference is that uh in the documentation they're not actually giving it a little bit of a timeout before hiding the splash screen but uh since uh it's recommended here to add this timeout we are doing that in our application over here maybe like a couple seconds uh and with that our setup should be complete so uh right now uh this is when I will uh actually go ahead and create a development build for that as we talked in the previous video I'm going to use this e build command over here for my uh development uh Simulator for my iOS and that's what we have defined in our our e. Json file the development simulator again if you don't know what this is and go back and check my previous video I'll put a link to that uh also in the description box below and you might see something up here as well uh so once we do that I'm going to hit enter and this is going to uh start the build for my iOS simulator uh you can see that the build is cute right now and I can go and check my uh Expo uh esas basically uh Expo application services website uh you can see that my simulator and the iOS build is uh spinning up and it's getting started uh you can control C out of this and then uh also do a build for Android emulator that's what I'm going to do now for the Android emulator uh you can use this command very similar instead of development simulator and we are going to use this development profile that we have this is good for Android emulator as well as uh actual physical Android device so with that I'm going to hit enter since we using the free version of the uh EAS uh over there uh this is going to wait for the uh first build my our iOS build to finish and then it will get started so I'm just going to wait for these two to get built and then I'll come back and continue over here all right our uh iOS simulator build is done now I can just click on it and and download the build so it's getting downloaded and all I need to do is just go to my downloads folder over here and then uh I am going to double click on this and then uh it will open it up and just unzip it and then since I already had one over here uh it's adding the number two to it and then I will drag and drop it in my iOS simulator and then just wait for it to build so once that's done uh to install once that's done you can see that our icon is there so first the in first icon is working fine then I can click on it and you will see that uh we need to start our uh the Expo server over here so we have the command it's basically MPX uh Expos start and then D dd- client and then as you see here if we click I if we type I over here it's going to load our application here so I have my light mode and I have my light mode screen which is the background of uh light you can see I had the light mode set up uh again this is something we set up in a previous video I put a link to there up top over here you can go check it out uh but but uh again I can do another uh I so restart the app you can see that we had the light screen and then there was like a little bit of delay uh since we were trying to load uh load kind of kind of give it a uh timeout over here of 2 seconds now uh for the fonts uh to change we obviously haven't applied any fonts to the uh text in the application a good practice is that uh I can go ahead and let's say create a new folder over here uh I call this folder my components and then inside this components folder I can actually go ahead and let's say create a component called custom text or whatever you want to really call it uh this is the text that uh the the component that will be replacing the actual text from react native so what I have here is that I have defin a costom text and I'm applying my font family of 400 regular to it h you can call it like regular text you can have a bolt text super bolt text and that kind of thing and it also allows for additional styling or class names to be added to this test so to this text so I'll save it and let's say my dashboard uh screen which should be um this one and instead of text I do custom text which is coming from the component that I just buil so that I needed to stay as text this one is supposed to be custom text and then now we don't need this text from react native and just look at this you'll see that the uh font changed over there and so if I reload the uh application over here you will see that the font is already loaded and we don't see any jumping or anything uh because that has been taken care of in our logic so and the next thing I'm going to show you is if we switch to dark mode and then if now I reload my application you'll see that the dark is applied so again reload you can see that the background is dark and uh that is what we assigned over here for the dark Dark theme we had a background of dark and sometimes I've noticed that even with the logic that we uh did over here with the timeout and all the steps that we followed from and this uh issue on GitHub I still somehow notice a little bit of white flash so if you notice that uh I don't think uh right now there is a solution uh for that uh like you can see here this is what they have suggested uh right now I don't see that really if I reload it it it's just dark um background for the splashes screen maybe if like I close that and then reopen it just like there you saw like for a little bit there was a white background but it might be because it's in development environment so uh definitely uh hope hopefully it works in the production so uh this was the iOS Android is going to be the same uh I will show you also the Android part in a sec right now so back to uh Expo uh our dashboard over here uh I see that my Android uh build is also done and then I can go there and click on this three dots over here and down download the build uh once that is done you can just drag and drop it on your Android emul emulator so I just dragged the um APK file that I downloaded and you should be able to see the icon that we added this is the Adaptive icon that we added in the asset folder and that's being used over here I can just click on it so the Android app is built and can see right now we are in light mode so if I refresh you will see that we have the light background and then uh if I go to profile over here and change it to dark background I can refresh over here so uh for this one it's not working so for Android the dark screen the way that we had it set up did not work I was still seeing the white background on the splash screen and so uh I had to come up with a better solution there uh so uh if you go back to app. Json file I now have a new image file for my uh dark mode for Android which by the way you could have used this uh method also for uh IOS as well but there only the background color change was enough and it worked but here since that didn't work I actually created another Splash Das dark with a dark background and for that I actually use the same video they had on Expo documentation if you go through that there is this figma file that they and give you access to and then there I created this splash screen with the dark background and just exported it as PNG and that's what you see here and then with that I it as my image for the dark splash screen I have rebuilt the um application using the Expo EAS common uh command and then uh with that now I have that installed the APK installed on this emulator uh and the server is running and if uh I had that set up as dark so if I click on it you can see that the dark uh background for the splash screen is working fine as you can see for the profile over here I had the dark selected and I can actually re reload it and you can see the dark mode here so with that the dark mode for Android is also working and uh uh everything should be fine now our font is also updated uh by the way uh for the custom text we had this font you can have any other font over here but also with the uh layout for the dashboard uh I got rid of the font B Bol that we had that was working fine on iOS but with Android that was overriding the uh 400 regular that we had in the custom text so uh it makes sense actually to get rid of that cuz our font is supposed to be the regular wait here all right uh so that was it I hope you learned something new and enjoyed this video if you did please uh make sure to hit the like button below the video and subscribe to the channel uh turn the notification Bell on and I will continue uploading videos uh so hopefully you will enjoy all of those as well

Channel: React Native Journey

Views: 337

Keywords:

Id: jEKdBqTclME

Length: 29min 21sec (1761 seconds)

Published: Sun Apr 28 2024