Dark Theme in React Native Tutorial | Switch Between Light & Dark Theme

hey guys welcome back to my youtube channel today in this tutorial I am going to show you how we can implement duct thing in our react native app so as you can see over here this is our app screen and here we have the draw navigator and in this run navigator we have this switch to activate dark theme so by clicking on this switch we can toggle between or default theme and the dark theme and when the dark theme is activated at that time we can see this is how our app is looking right now and we can sign out from our app and after signing out this is how our other screens are looking and all these things I have implemented in my previous tutorials so if you haven't seen those tutorials yet I would highly recommend that you go ahead and see those tutorials I will link that playlist in the description below or you can check that from the I button at the top right corner of this video and also I have shown you how to implement this authentication for our app and today we are going to implement this dark thing so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification mail icon so that you get notified whenever I post a new tutorial like this so without wasting any more time let's get started with the tutorial so this is our app and we have to login to our app to set our theme preference right so over here we have this switch but currently it's not working it's not doing anything so we have to make this work to make it work we have several cases in our project first one is react navigation we have implemented react navigation in our app and react navigation by default supports ducting let me show you this is the official documentation of react navigation and here we can see that default theme is supported in react navigation native package so we can get help from that as we have the default theme we have taught them as well so we can apply dock theme in our app from react navigation if react navigation is implemented in order and as our app is already utilizing the act navigation we can implement the dark theme over here and to apply it we have to pass a theme prop and in this theme prop we can set this stock theme now after saving it we can see dark theme is applied in our app right but it's not working properly as you can see our background is changed to dark and our drawer is also set to dark note but other than our menu items every other items is not changed to that mode properly why is that because all the things are not coming from react navigation the screens are coming from react navigation the menu items coming from react navigation but other than this these items are not coming from react navigation these items actually coming from react native paper which is another UI library let me show you these are the elements which are implemented in this section and all these elements coming from this react native paper and react native paper also supports ducting by default this is the react native paper documentation and here also we can see default theme and drop them from react native paper right and similarly we can pass theme pops from paper provider to our app right so let me implement this so for that we need to import provider and duck team but as we have already imported top them from react navigation and this is also dr. so the name is conflicting with each other I will change this so they stopped thin as paper duck team and provider as paper provider now we need to wrap our app with this paper provider so paper provider team will be papered up team close this now save it now we can see our custom drawer is looking nice but if we look into our app screen then we can see that our text is not visible here so dark theme is not working properly for our custom components and also this switch is not working it's not functioning properly right so we have to implement the functionality for this and to make this switch work we have to make some changes in this file here we have this is dark theme state and we have this toggle theme function and when we are clicking on the switch that time this double theme function is executing so it's setting is doctor you to true if it is set to false and it's false if it is set to true but right now we will set this is dark theme state from our app.js file so I am cutting this line from here to AB J's file and here I have pasted it and now I need to create the Doble theme function so toggle theme function I can create here in this earth context where I have already created these functions the sign inside out functions below this sign up I will create toggle theme and I will update all state over here and it will reverse its state right and we can access the struggle theme here from this use context hook right and I have already explained all these things in my previous tutorial where I have shown you how to implement the authentication in an app so if you haven't checked that tutorial I would highly recommend you go ahead and see that tutorial also I would recommend that you see complete tutorial playlist then it will be easier for you to understand the project structure and all so over here we have this double theme and we can use this double theme in on press and we have this double theme present for one press already so now save it now we have an error can't find variable is rock theme so here for the value of this which we have provided a stock theme and is rock theme is not present in this file anymore right so we can access this state from this file now let me implement some other thing here I have imported this stock theme from react native paper now I will import default theme from react native paper as well as from react navigation let me quickly import those things you now we have important default theme from both the packages and I have changed those names so that it doesn't conflict with each other now we can combine these two so now let me show you how we can combine themes from these two different packages so for that here we can see for reality paper we can create our custom theme and we can spread the themes from our package like this and for the colors we can also do same things and also we can see that we can avoid our custom colors as well right so like this we can set our custom theme colors and for react navigation we can see we have similar kind of things so we can spread our default theme and for the colors we can also do similar kind of things for our colors and we can set our custom colors for custom themes right so let me create custom themes first I have created custom default theme and here we can spread through our default theme and default colors right so we have navigation default theme and paper default theme so spread through our default theme for react navigation and we can spread through our paper default theme and for the colors we can do similar kind of things or navigation default theme colors and paper default theme colors so it is our custom default theme and for custom dark theme we can do similar kind of things and now based on this dot themed state we can set whether we want this custom duck theme or custom default theme so here if is darting is set to true then it will be our custom duck thing otherwise it will be our custom default theme and we can pass theme over here so it will work dynamically and now let's see here we have this boolean so if we are set to dark theme then this dark boolean will be set to true otherwise it will be set to false similar thing we have for this react native paper as well so we have dark boolean so we can fetch that boolean to display over here right how we can get that value to get that value we can use use theme for our react native paper also for react navigation we can get this reuse theme hook so from use theme can get paper-thin and from this paper theme we can get that dark boolean value so here it will be paper-thin dot dark right now save it now let's check it once by default is set to default theme which is our light theme now click on this switch then we can see now it's set to adopting now it's toggling back to one like them right so that's how it's working now we need to do some more customizations so first thing we can add our custom colors in our custom theme so I'm doing some basic coloring so that you get the idea for default background I am using white color and for text I will use this black color and for dark I will use background color as this black color and for the text I will use white color so now you can see this background has been changed as I have used background color now it's a little bit visible but I will change this to our custom text color so for that I can do this from our home screen so this is our home screen here we can import use theme from react native paper or react native navigation as well so previously I have imported use them from react native paper now I will import this from react native navigation so it will be react a vacation native so here I will get the information of our theme by using this used a book and I will get the colors of it and for this textile I will set the color to text color which I have set over here right so now save this after saving it you can see that it has been updated now I will add this status part to light content for this stock thing so for this I need to import status worth I will add status bar and bar style will be light content let me see so it's light content right but this will be said if the theme is set to nothing otherwise it will set to that content like this right so now I will fetch the information related to our theme from this you steam hook and if theme is said to dark then we will return light content otherwise we will send these two dark content right now save this now change our theme so now you can say that it's working properly right so we have made custom change successfully now we need to do some more customization for our other app screen so when our app is set to dark then we want to display these screens in dark mode as well so for that we need to update some things in our splash screen and sign-in screens as well so we need to import this use theme and colors and we can save the colors to our elements right so for this flat screen we have footer element and in this footer element we can set the color to our background color now for that we can import this used him here so import this Houston and we can get the colors from here I am copying this now we can set the color here so it will be background color and the color will be colors dot background now after saving it let's see this is how it's looking right now so we need to update the color for this text as well so it will be our title so for the title text it will be color colors text or text color so that's how it's looking right now and for the Sign In screen we need to do the similar kind of things so first we need to import use theme from react native navigation or react native paper so from react native paper we can also access this and we will have these colors and now for this footer view we can add the background color similar to our splash screen no it has been changed so we can update the colors for all the elements of our screen so let me do all those things quickly you so now save it after saving it let's see it's working properly so it has been updated so now log in to our app let's set our preferences to differ them and sign out so now we can say that it's all working properly so now the things are working properly so like this we can set our custom colors to our custom theme and we can add those custom color to our custom components so this is it guys this is the tutorial I hope you have learnt something new from this tutorial if you do so then hit the like button let me know by commenting down below and if you have any kind of solution for me then also let me know in the comment section below and don't forget to subscribe to my channel for more tutorials like this and I will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 50,972

Keywords: react native dark theme, react native dark and light theme, react native dark mode, dark theme in react native, react native theme switch, react native theme provider, react native theme design, theming in react, theming in react native, react native theme tutorial, react native dark mode android, react native paper dark mode, react native paper dark theme, react navigation theme, react navigation dark theme

Id: km1qm1Zz2lY

Length: 16min 40sec (1000 seconds)

Published: Tue May 05 2020