The best and easiest way to add a custom theme to Expo app with Expo Router (V3) and NativeWind (V4)

hey everyone Gordon chap here welcome back to the channel so this video we're going to talk about theming your app so uh so far we've added Expo router and also native wi to enable Tailwind CSS styling and at this point I guess this is time to kind of uh see how we can add different themes to the app I have done a lot of research in the past week or so and I think what I'm about to show you guys it's the best way at this point in 2024 with the latest versions of all the libraries and uh whatever is out there this is the best and easiest way to uh theme your app we're going to talk about Dark theme light theme and also allowing people to just default to the uh original uh theme of their device so uh with that let's get started so for this whole theming thing uh we're going to look at different documentation we're going to start with the color themes documentation of Expo and then we'll move on to the next step so uh I will have links to all these uh doc pages in the description deson box below this video and so you can go ahead and access them uh using those links uh also as for the code here my starting point is the code that we had at the end of the previous video where we set up um the Expo router and we had already set up native bin and type of script for our Expo project so I also put a link to that video in case you're interested to see that uh but this this is the starting point here we have our app directory and the layout TSX file is the uh starting point for this uh uh whole application so let's follow this colar themes uh documentation here the main thing that we need to do is to make sure that the user interface style in the app. Json file is set to automatic so that's because uh we want to make sure that uh this follows the system appearance settings cuz we're going to uh give the users options to either select a light theme or dark theme or just default to whatever the devices theme is so this is what we do here and then the next thing we need to do is uh we need to check our configuration here so for that uh we're going to uh run this little command here uh in our project directory so I have uh uh that here and then uh you'll see a whole bunch of things you scroll all the way up to the very first line there and uh if you see this Android user interface style this a warning that they also mention here and you need to install this Expo system UI and they have the documentation right here so I'm going to click on this and then copy this MPX Expo install command and then I'm going to install that right here so uh once that is done we should be good we don't need to uh do anything else for that uh uh we could try and run the same command here again so the uh Expo config uh introspect over here and then if I again scroll all the way back up I should not see that warning so let's find the first line right here yeah so I don't see that warning anymore so we are set now this was the very first step using the Expo docs and now we're going to move to the next step all right so the next step is uh to use theming using the react navigation since we are using the Expo router and Expo router is basically a wrapper around react navigation we could take advantage of the uh default theming provided by the react navigation so again this link over here I'll put it in the description box below uh this video but basically you can see that everything theme gives you uh either it's dark theme or not so Boolean and then there are like different colors that uh we can look at a in a little bit uh we can Define our own theme but we also have these built-in themes that uh default theme and a dark theme that we're going to actually start using right now so I'm going to grab this uh code uh and then since we already have Expo router and everything installed uh I'm going to go inside my layout. TSX right on app this is the entry point for the whole app application where we have defined our uh draw navigation and over here I'm going to bring that code and then one of the other things that actually this react navigation provides is a theme provider and uh that's something we're going to also bring in and then we are going to uh use this theme provider basically wrap the whole application with that and then there is this value uh prop for the theme provider that we are going to use and then uh that value prop can take one of these default or dark theme dark theme so uh let's uh move these uh around make sure our code is fine and then now here for example I can do default theme so default theme is actually what's already there so if I go and do MPX expose start and I'm going to do Dash C to clear cache and right here I have a simulator ready to go and so I'm going to do uh iOS and it's going to open the app for me now this is the default theme that even without this whole theme provider that was being applied so the colors for these navigation uh titles for the uh different screen titles over here this is all coming from the react navigation built-in theme so if I for example change this to Dark theme right now you will see that the whole thing basically changed so we have now new colors here and uh uh the kind of like even the screen uh color has changed its background over here and obviously we don't see the text that we had here and that's the next part that we're going to look into but this is how the whole theming in the uh react navigation affects your app so I'm going to uh rever it back to default theme so that you can actually see yes we had the TT over here and also in the profile screen now uh there is this uh function or method from react native use colorist scheme uh that we can actually use to get the color scheme of the device and then uh we can have like radio buttons so that like users if they click on dark or light or system for example theme it will switch between them using this use color scheme but actually uh Native wind in their themes they also have the same uh function uh or method use color scheme we're going to use that for here because it gives us some more utility functions that we will be using throughout the app so what I'm going to do is actually I'm going to grab that and bring it here use color skin from again native B and then in this theme provider uh well basically what we're going to do is uh we are going to use uh this let's use color scheme method and uh grab the set color scheme and color scheme uh uh from this H and you can actually if you hover over you can see it has set color scheme toggle color scheme and then the color scheme which is either light dark or undefined so using this color scheme we can have uh for example a uh a condition here if color scheme is equal to dark uh I want to have my dark theme otherwise I will have uh my default team so that's uh what we have here dark team or default team so right now I saved it now uh let's uh refresh this just to make sure so this is right now showing dark theme and uh we're going to go and check out what the theme of the app Current the device currently is and if we go to the developer setting we already see that this SP set to Dark theme and if I switch this back to light theme and go back to the app you'll see that it will switch to the default theme which is the light theme now since we are using simulator there is a shortcut command the shift and a to kind of switch between the uh different uh the between dark and light theme of the device and you can just test it using that but uh normally if you're working on a real device you're going to have to go to the settings and then find the appearance or like a display setting something like that and then switch back and forth between the two so uh that's fine uh this is uh uh good but what we are actually want is to be able to click on like radio buttons or give the user uh the opportunity to switch between the themes uh or set up a theme that they like uh before we go there though I want to go back to the react navigation over here uh we did see that we can actually customize this theme uh any theme that we want to have different colors so uh for that I'm not going to touch the Dark theme uh I will be changing the default theme right now I'm going to basically Define my light theme uh to do that I will just create this utilities folder and in there I'm going to uh create a new file and I'll call it let's say theme options for me. TS so uh in this file you can have multiple uh theme options like I said right now I'm just going to define a my light theme Here I call it my light theme and then obviously the dark should be false because this is my light theme and then uh uh the colors is what have been uh described here like for example primary color is the what that's used to tint various elements and so on and so forth so I've just like assigned some colors here and then so remember if we go well this is our light theme uh so just look the colors that we have here kind of like bluish and then the dark text over here and uh so if I uh save this and then go and use that instead of um the default theme that we had cuz the default theme was the light theme for the app so I grab the my light theme and then if I switch that you'll see for example I had a new border color here of blue and that's right here now we can see those borders and then the text I have kind of like this dark red for the BR primary color and so you can see those also there so if for example I change the border to let's say uh green color you'll notice that this changes so so you can play with these different uh colors and then that will affect everything related to the navigation or explorator part of your app we are still not changing anything in the actual screens cuz that's part the part that we set up with Native win and tail win CSS and that's something that we'll look at after uh a little bit butth right now again look at these colors See For example background text border notification those are the things that you can change or if you need you can actually add new uh colors here as well so for example let's say uh you want to add my uh primary but button here for example primary uh button and then you give it a color and then you'll be able uh to use that in your app and again I'll get back to this a little bit later right now what I'm just showing you these are the default colors that come with the app and are already applied to different section of the uh xor router all right so far uh we are able to change the theme using just going to the settings and changing between the dark and uh light appearance uh but at this point we want to actually uh add some uh radio button so that people can like click and select whether they want Dark theme or light theme or just default to the system theme uh for that so let's uh go back to light them for now and uh we're going to use the react native elements uh right now for this to get the check boxes on the page you can use whatever you want so uh this is just what I'm going to use and uh obviously uh it makes more sense if you have those in the settings page but right now I'm just going to put those radio buttons in the profile page so that uh it's easier to switch between these bottom tabs and see the changes so uh for this react native elements I'm going to uh install the uh package so uh in this page we have the installation guide so I'm going to install uh themed and base from the uh react native element and then uh there are a couple more steps here the first one installing the vector icons we don't need to do that because we're using X1 it's already there and the second one is you installing the react native safe area context and we already have that because uh that was part of the Native Bend setup so we already have the uh package over here so we're good there as well so and if we don't need to do anything else here uh I'm going to look for the checkbox uh uh element from this react native element library and we are going to use the radio button here so you can see the code that we need to have a state Val value so that we keep track of what which one of these radio buttons are selected so uh I'm going to uh first of all uh bring this checkbox import checkbox uh in my like I said I'm going to do it in the profile uh tab so that is under my tabs profile over here so I'm going to bring the checkbox uh import over here and then uh I do need to also bring in uh a uh use State uh to uh keep track of which item is selected so right now as you can see I'm uh assigning a string to this so if it's for example light mode or dark mode or system mode so uh that's uh originally we are assigning light to it and then uh for the checkboxes uh I'm going to use a similar code AS here so we have a different uh uh checkbox elements here so I am going to uh bring them over and then so for uh as you can see here uh each of these have like a checked uh prop and then on press and so on and so forth but uh we have also title that what's going to be shown next to these uh toggle uh the uh radio buttons and so we have the light dark and system I'll show you in a minute uh the toggle uh color scheme actually right now it's just going to be a very simple uh set selected index basically right now I will have the theme value as string as well cuz that's what we have here it's either light or dark or system and we'll make a a little bit of a change to that later uh but uh uh right now we only have this set selected index here but uh we'll have more uh to this uh later on that's why I don't have it in line here I have it as a separate function over here so if I uh save this and then uh go back to the app you'll see that we have light dark and system over here so as I switch you can see that this is at this point just like setting uh the selected index to the corresponding uh theme uh it's not doing anything right now so that's the only thing we are uh doing to be able to assign uh like uh the theme the selection here to the uh actual theme of the uh application we are going to again use the uh use color scheme from native bin and if you have if you remember and this has some good utility functions that we can use uh one of them over here on bringing that here is a set color scheme and so as we change this uh radio buttons over here to assign the theme that we like we can also set the color scheme uh to the selected uh theme value and there's a problem here though that set color scheme is uh expecting just these three values over here however this theme value as we've seen up here it's just a string uh or here it's just a string value so we need to kind of Define a new type and to do that I'm going to create a new uh file over here in my utilities I'll just have a general name of types. TS and and that uh is where we keep track of this theme options which are light dark and system and then I can actually use that instead of uh the string that we have here for both uh here for the state and also the tee theme value so these are going to be our theme options and with that we're going to get rid of that error cuz the theme value is also a theme option which is light dark or system and that's what the set color schem is expecting so if I'm going to save this right now and then just a quick reload up the uh app over here going to profile if I switch to dark you see that the whole theme will change to dark and then the system right now is set to uh light but if I do command shift a as a shortcut to switch theme you can see it will go back to light and dark uh as we switch the theme of the entire device so this color scheme or set color scheme it's kind of looking at the device theme so uh this is very important just keep that in mind we'll get back to that later H and like I said mentioned previously briefly if you keep doing this color theme change I'm just doing like command shift a multiple times it gets a little slow as you saw here it took a while but there is actually a uh an issue in Native wind GitHub repo that they have someone has actually mentioned it uh but the point is thatth when your users are on the app uh they probably won't be like playing with these they're going to just set a for example Dark theme or light theme and then uh they will be fine like and uh who knows maybe by the time you're watching this video that this issue has been resolved and uh you can uh you won't see this delay that I see right now uh anymore so uh don't worry about that uh and the other thing that uh I want to point out is that the status bar over here is the uh kind of looking at the theme of the device and it gets updated automatically so if I go to light mode it goes to kind of like dark and then dark mode it will switch to uh the uh like light color up here as you see over here and so that is being handled automatically for us which is super helpful all right so uh we just implemented a way to switch between the themes give the user the option to switch between the themes in the app uh but we still have a problem because if I go to dark mode you'll see that like the text doesn't really update here in this screen and uh if I go back to light them you will see that there's actually a text here and so we're going to need to fix that as well the thing to know uh to remember about this is that the text theme or like The Styling is coming from the Native wind and the uh classes that we have assigned for example for this tab dashboard we have a text nothing really class name assigned to this uh but it's going to use the default uh color which is this dark color for uh no matter what themes because we are not telling this actually to switch between the colors when the theme switches or anything like that so to address that we are going to actually do a couple of things with the uh CSS file that we have the global CSS file over right here uh that we added when we were setting up the native wind uh setup uh we're going to use the root and uh a media uh call over here to for uh to grab the dark mode uh so this is how you can actually uh assign different uh variables to your uh themes this root is the original like default theme of the app and then we are saying if it's a dark theme and then the same uh variables will have like a different color over here and for the uh Tailwind CSS to recogniz these we are going to have to uh go to Tailwind config.js file and there we are going to uh add those to this extend uh part over here of the theme we're going to assign these colors which are basically uh grabbing those variables background foreground and primary from the uh Global and then kind of assigning those to the native wind or Tailwind uh style variables right now so for example if I go back to my uh dashboard over here which is uh under the uh the tabs folder index over here now I can assign classes here so first of all for example like uh these are not themea specific just like trying to make it a little um um figure and maybe a font of bold here uh just so we know the um Tailwind classes are working and then lastly we might probably we may want to add like text uh let's see foreground over here uh foreground yep uh is this color is the dark color for our default theme and if for Dark theme it's going to be a light color so I text save it over here and then uh go and well right now we have default theme which is light theme and then that's going to be uh the black color over here if I switch that's going to be our uh white color so you can have as many as these variables you want depending on the theme that you're defining so and normally I would suggest in a previous step we Define these variables like primary background card etc for our react navigation which we then assigned uh to the whole uh theme provider and the whole application uh so I would suggest keep these kind of like uh the same uh so that uh when you need to make changes the changes are more consistent so I'll show you in a bit what I meant by that uh but right now you can see that the text changes and for example if I want to have a different background also for the whole thing I can do a BG background uh this is not going to change anything because the uh background for uh light theme is light and then for a dark theme is like black color so that was already what was there uh but you could like have different colors like I said maybe for the background we can use the primary color I don't know so this is just up to you so like we had the dark red for the um root which was our default theme and then that's kind of like a shiny or light blue for the Dark theme and that's what you see here so these get assigned to the screens itself which screens and the text in there uh and that's what we use Tailwind classes to uh kind of style those things so and this is uh it for the uh Tailwind uh styling so like I said you need to just add some variables in the global. CSS and make sure that Tailwind config file uh you also let the uh Tailwind know these are the classes that you are going to use that are uh kind of have this oneon-one relationship with the variables that you decide you uh defined over here all right now uh I did mention that it's a good practice to have these uh variables kind of similar to what you had for the theme option and that's because for styling some uh elements in your application you can't really use a Tailwind class names to style that those so for example if we go to the check boxes that we had here we could have like a class name to assign a uh background color for example to these elements over here so for example for this checkbox I can have a uh class name of U BG background which is kind of like uh for the Dark theme as you remember this should be background for Dark theme is dark so right now it's light so if I save it you'll see that this one switched to dark and if I go back to light that's the color that we had so uh you could do some of that with the classes uh but for example to change the color uh of these uh little uh radio buttons you can't really do anything with class names cuz that is controlled by uh the checked color uh variable um uh the check color prop for this checkbox we could use we could grab my light theme so I have my light theme and then colors and then for example we want to assign the primary color to this uh radio button so I click on it you can see this is the dark red and then we can do probably uh similar thing or maybe a different thing for uh the dark mode so if I click on this dark mode over here once I save it you'll see that's getting that uh uh the my light theme color but uh actually for the dark mode you probably want to use the uh dark mode colors and uh there's actually a very good uh uh helper or utility function that you can get from uh react navigation and uh if we look over here in the documentation that is the uh use theme uh kind of like helper I would call it so I can uh go ahead and in my uh profile where I have the check boxes I'm going to bring that over here use theme and then I'm going to grab different colors from uh that used theme uh for my uh default color which was the uh dark mode for example over here so I can go and uh do instead of my light theme colors I use the colors that I get from the uh current theme which is the Dark theme and then assign the primary color to that and right now as you can see that primary color so if I switch is the light blue that we had you can do like they have a different colors so for example we have border notification text uh we can use notification it's this red color over here which you can use uh now for the system over here you can actually uh use the color scheme here to set up a conditional scenario oops uh over here I'm going to do color scheme if it's equal to dark then I'm going to use colors. notification and then if it's a light theme I'm going to use the primary color from my light theme so what happens is that oops that was the title I needed to change this checked color and then title will be still system and so if I do system over here since we have a dark theme right now that's going to get the red color which was the colors that notification and you can by the way get the take a look at these colors if you uh log them in the uh terminal like here the notification is this like kind of reddish color over here so if I switch back to uh light screen this is the dark red color which was my uh light theme color primary that we had uh over um the theme options over here so this primary this x color over here uh so that's how you can uh make sure that your tailing classes uh that you had are kind of compatible or consistent with uh The Styling that you will be using for other elements that you can't really style using Tailwind classes so for example you could have a notification variable also over here in this uh uh global. CSS and refer that basically here you could have a similar uh notification and then for the uh elements that you can Style with tailin CSS you use class of for example text- notification or BG Das notification but for the elements that you can't use the class names you can just use my light theme. colors. notification that's how we style this year as well so so we're almost done uh the one thing that we need to take care of the last thing that we need to take care of is for example if I switch to dark mode here and then I close my app and then uh let's say reopen it we are not going to see the dark mode there so it's going to go back to what we had which was the original theme that we had selected and that's the light mode that we have so uh we need to take care of that and in order to do that we are going to uh store the user selection uh in the device and for that we're going to use this async storage from Expo react native uh you can uh copy this uh to install the uh async storage package and that's what we're going to use to store the user selection and then later on when they open the app we'll grab what they had selected and then uh uh make sure that theme is uh applied to the app so uh first thing first we are going to go to this profile uh uh screen over here where we are uh making our selection and as we select we want to make sure that uh we actually save the selected value in the uh async storage or the devices storage so uh very easy not so much there I'm going to uh first of all import async storage over here uh just make sure it's from the exact uh library that we just add added uh and then uh we're going to just uh wait this uh async storage set item I'm going to uh also change this to an async method uh and this is how you set this uh this theme value to the theme variable that will be stored in the device so uh if I do that and then next time we select the theme uh I'm going to have to close and uh reopen the app just so that we are uh starting from how it would look like originally so if I do dark here and this is now saved in theing storage and now we need to grab that for two reason one uh we want to assign that theme when the user reopens the app to we also need to make the correct selection here uh based on what they have uh set so the uh Dark theme is selected now so when they come to the screen we need to have this radio button selected so we're going to take care of uh those two uh here uh firstly to make sure that the correct selection is uh shown to the user when they reopen the app function we're going to use the effect hook to uh get the uh the theme that's been saved into the ASN storage or the device storage and then we'll be uh setting the uh selected index which is the uh way we select is the uh selected radio button to that theme so uh since this is an async function I'm just going to Define this get theme function over here and I'll just get item use the get item method from a sync storage to get the theme value and make sure this is set as theme options so it could only have these three variables so that when we if it's our if it's there if the selection has been made uh then we are going to assign that value to the uh selected index that we have here and that should take care of the correct selection over here so we have selected dark I'm going to close the app and we reopen the app here we don't see the theme applied to the app but we should see that the dark is selected over here because that's how uh we have set up the code here so it's going to get the value and then make sure the correct uh radio button is selected for this so that's the first part the second part which is almost uh very similar to this is to uh grab the um selected theme when we load the app and then apply that to the uh whole application so for that we're going to look into this um layout. TSX which is our entry point and again using use effect hook uh we are going to make sure we have uh these uh imported and again make sure the async storage is uh coming from this uh Library over here so we have that this is uh again very similar to what we H did in this file over here and what we're doing is we're uh calling this slow theme function grabbing the theme value and then if there is a theme value stored in the device we uh use the set color scheme from uh the native B and then assign that stored value to set color scheme and then uh since uh we are uh also looking at the same color scheme over here and then if that's changed then this color scheme is going to change and it will be applied to the uh app when we load it uh also if uh we are changing the color theme in the app we can also uh add this dependency over here because uh we want to make sure that every time we change the color scheme uh or everyone the color scheme is changed this uh uh use effect Hook is called uh so that we uh set the color scheme to that specific value over here so with that if I save this uh you immediately will notice that now we have the Dark theme over here and if I go light theme we have light theme over here and then system also is light but if I close the app right now and then remember we had that set as uh Dark theme and then reopen the app we should see the Dark theme already applied so we do see the Dark theme is already applied and the selection is also made for the system uh right now it's SL so it changes if I go and make this dark theme we should see that change automatically and then also if I close the app and then uh reopen it well if during the process the theme changes to light theme and then I open the app we should see thatth we see the light theme which that's the case here and the selection is all also at the system uh over here so uh that should take care of everything uh just to recap we did some uh theming for the nav navigation and then we had to fix some uh theming or styling for the classes which were coming from native wi and then uh finally we had to make sure that the user selection is uh stored in the device and that uh we were able to uh grab that uh when they open the app and then apply the theme that they wanted to to the app as they open it so uh that should be it uh um if you like the video please make sure to hit the like button don't forget to subscribe to the channel I'm going to have more videos about different things related to react n and Expo and uh make sure to subscribe to the channel and hit the notification Bell as well to turn it on and uh I'll see you guys later

Channel: React Native Journey

Views: 391

Keywords:

Id: O6SYukr2zd0

Length: 46min 11sec (2771 seconds)

Published: Tue Apr 16 2024