Dynamic Theming in React Native: A Guide to Hooks

hey there everyone they share back again with another video and welcome to the series of react native first of all thank you so much for keeping the patience I was not able to upload videos from last couple of days in fact more than that I was suffering from a severe case of a throat infection I am still on the recovery mode so I won't be pushing myself too much so that I mess up my health I won't be doing that this time but it's good enough that I can push at least a couple of videos in a one or two day in the frequency and in this video we're going to be finishing up our first app although the app is almost complete but there is one more topic which I wanted to cover this topic will give you a little bit idea about how to explore things as we go further and after this video I'll also make a video about what we have learned so far so that we all can come up onto the same page and we can explore what we have gathered so far so moving on so as we saw this is the code a segment that we worked on in the last video pretty easy one and there were a couple of typos that I've made I'm pretty sure you might have already noticed that so we actually introduced this dark mode as a variable as a Boolean it is giving us the values by using this simple method use color scheme we didn't talked about it so it's obviously a good time that we should talk about this in this video and we said if the dark mode is available let's get a variable as true otherwise false and based on that we actually designed a few Styles white text and the dark text nothing too extraordinary in that really basic so if the dark mode is true then we want the text to be dark and if the dark mode is false then we want to make it white so obviously this is a reverse of the logic that we are going through so this is what we have and we can see the text is dark in this case but let's just say dark mode is enabled so we want to make it onto the light mode so all we have to do is uh simply we can go up and instead of dark text I can go ahead and say white text save that auto reload happens and we get the refreshing text so we realize that we can actually design a pretty easy way that how we can have two modes in our app just based on this one variable we can design two styling in another app one can be made for the light mode one can be made for the dark mode and you can go really crazy in that maybe you want different icon set to load on the light mode maybe different icon set on the uh dark mode and have more styling but the important question that we have in front of us is what is this use color scheme that we have and we should really be talking about it this is exactly the moment where you learn how to learn by yourself surely tutorials are great but eventually you have to go through in the documentation itself so let me go ahead and move it up here the documentation that we are going to study so uh this is the variable or this is the property which actually gives us so notice here we are importing the use color scheme uh in the code segment itself if I go ahead and open up the codes code segment let me just show you the code files as well notice here we are using this color scheme and we are importing this so this is exactly what we are doing up here and if I go up here can we turn it into dark mode yep much better now so notice here the use color scheme is a react hook which is provided to us by color scheme updates from the appearance module so it should be your responsibility to also explode a little bit about the appearance and you will notice that it's not like too much of a big documentation but it should be read by people so appearance module exposes the information of users appearance preference in their preference color scheme so these days in all of the mobiles web browsers almost all applications have this user preference setting this is available to us by appearance and in the react native this same thing comes to us using this hook which is used the scheme so we don't have to dig up into the appearance take out the values we don't have to do it we simply can take this hook and it will do the job so notice here the supposed color schemes are light dark and null So based on this we can Define our parameters some examples are given here although these examples are on Expo but since this is a common practice between the CLI and the Expo this can be done exactly same so notice how easy it was to read the documentation and explore one line so now in the interview if anybody asks you about how can you design the color scheme you can actually explain him so much in depth that how this is how it works this is the appearance module this is the hook we can actually go for and these small things actually makes you a better programmer so with this I would say that yes we have done a pretty good job in the very first of our application and I would call it absolutely a day here that's it our application one is all done and before we go further I would also like to mention a lot of people here so let me go on to Hash node and on the hash node if you go up here and try to look for the tag tags are like react native let me just search for it react Dash native and if we go up into the latest segment of this notice how much people are actually building in all of this so uh a lot of people are beginner's guide styling component these are all the tags and articles being written by the people who are following these series react native components and all of that so my recommendation is please go ahead write more articles read from here this is the community that we are building up so a big shout out and thanks to our sponsor hash node for making us possible to make this video in case you face any doubt or installation or anything our Discord server is open feel free to post up there people are really kind there to help you out and definitely look forward for the next video where I'll summarize all the things that we have done and I'll also walk you through what we are building next up

Channel: Hitesh Choudhary

Views: 58,710

Keywords: Programming, javascript, react native, hashnode, mobile development

Id: 6BlFPa_MGNg

Length: 5min 29sec (329 seconds)

Published: Fri Feb 10 2023