Implement Dark Mode in React Native | Advanced React Native | React Native | React Native Theme

hi guys in this lecture we are going to explain how to manage our theme so most of the application you have seen light team dark theme like you can switch between theme right so we are going to explain how we can achieve this in react native for that one i have already created one project you can see in my desktop so if you are not able to create a project what you have to do just type the command in px react need to init team so this is a project which i have created now i have imported my project in my vs code and you can see the project is running on my device right now what we are going to do we are going to remove all the by default code yes here you can see by default code now also i'm going to remove this section as well so just skipping app cloud functional component yes so we can just remove this section as well you can just type view style flex equal to one you can give a background color for identification we can just give red right now what we can do we can just remove this one we can remove this section as well i only need a text so we can just remove all other code which is created by react native okay here now what i am going to do i am going to align this text at the center align items sender justify content sender fine now what we can do we can remove the unwanted style which is not using we can just remove this one yes now we can just check what is rendering on react native we can just remove this as well yes on the section you can see app.js is printing so alien item center justify content centered also should work but it is not working so we can just highlight yes is there flex equal to one yes it should work like is equal to one and just change the color into green okay now you just check align items send justify content okay if i refresh app.js should be at the center yes it's under now what we need to do so we can change into like team or dark theme according to switch right so what we are going to do here we we are going to do a black color now here you can see as this is dark mode color is returning so we can just have a dark model true black otherwise we can just have it white now let's see what happening if i refresh yes it's in not in the dark color it's a white color so use color schema is a react native api which will return the state of color of mobile application if you have any query we can just check out the documentation so just go here use color schema in react native so this is a built-in ap of react native so use color schema is a react hook provide and subscribe to the color schema update from the appearance module appearance module the module which is of the device module okay so it can be returned to color whether light dark knowledge okay so this is a use color schema is a react native api which is written the state of color of our mobile okay so this is the schema which is returning who can subscribe to the color schema update from the appearance module so appearance module information of user appearance preference i just there is color schema right so you can set color schema in your device that value is returning from use color schema so that is here my in my device it is returning light to light because i didn't do anything right no so for dark mode i can just set the color as well here i'm just setting my color is dark mode is dark mode if it is dark mode we can just return white color otherwise you can just return dark color right so now if i just look into my emulator nothing change right now what i'm going to do i'm going to create a switch here sorry react native switch so i imported one switch here then i am going to declare a use state here so we can just use state fine now what i am going to do i am just create a variable is dark okay now we can just set set is dark one method to change the value of e star so use state we can just declare here and we can just pass this value as initial right now what i am going to do on the switch here we can just declare switch we need to pass a value so we can just pass e star so e is dark i'm just checking the methods of e switch so where i can get the values when i'm changing that right so here we can just yes on value change here i'm just returning a value then i'm just copying this into set is dark okay now if i just close this one let us check what happened um we can just harvest refresh here you can see a switch statement now if i just switch into here i need to set into dark color right so what is happening yes i need to change into each dark mode into this one this one okay now if i just check refresh again if i check see this is changing into black theme right all the application is changing into black team here one mistake we are doing for is dark or the text color should be in the opposite direction now if i just check yes it's fine for if it is not black if the background color is white so is that we should have the opposite of this one so we have we can black not dark okay so we can just change into the opposite direction previously we have done a mistake so just change now if i just refresh my screen here you can see now the text color is black now if i just change my theme all the background color is changed into black and the text is changed into black here you can see right now currently what happened we have managed all these things using state right here the problem come when we have multiple screen or multiple component we cannot define all this state or we cannot pass this old state into the endear complaint or in their application right sir for that one what we are going to do we are going to organize this team provider or theme context into a a context method right so for that and what i am going to do i am going to declare a b folder here src sorry delete this one i am going to declare a folder src here right inside this folder i'm going to create one more folder theme so this folder in this folder we are going to manage all our theme concept okay for that one first we need two set of color right so here you can see when it is black we are to we are using our text as white right and when it is black background color is white we are using our text as black so this color there will be two set of colors right light colors and dark colors so we can go to the theme and we can create a folder colors dot js here i am going to declare two constant export const light colors okay just light colors and also we have expert const dark colors so we will have we will be having two set light colors and dark color so we can just improvise sorry yes light colors and dark colors fine now what we can do we can just declare primary here what will be the light color the primary color will be white and the text color will be black right so we can just do text color black here in the dark color the primary color will be black right so we can just declare primary color black and the text color will be white right so we have created two set of colors light colors and dark colors right now what we need we need to create a function where we can manage this all this concept switching between colors in one file right for that one what i am going to do and create i am going to create a provider so if you are not aware of context or use context api you can check out the videos about context here i am going to create one context where i am calling as stream team provider dot js okay now what i am going to do i am going to import react from react fine right so what the next step is what is the next step we need to import old colors right which we are going to use in this uh file so we can just import light colors and dark colors from colors okay now what we are going to do we are going to create the context so we can just export context team context so here we are going to create the theme context so how to create a context we have to import from react so we can just import that method create context okay so create context now we can pass the initial values right so i'm just passing my initial values dark so whether i can get a value dark false and colors so initial value of the colors will be we can just pass light color for now now there should be a function to change this color right so i'm just declaring a function set schema as an empty function route i am not writing any logic for this one for raw so because this is a initialization right so we don't want to write any logic here we are just creating a context here now the next thing is we need a provider right so if you are not aware of the context you can check out the videos of context now i am going to create a context provider right so you can just con team provider okay here i will be passing my props so because i'm going to create this as a hoc confidence so just i'm passing props here now the first step the first step we need to get the initial value right so initial value where we are creating the initial value using the use color schema which is the device state right so we can just import our use date here right so we can just get the initial value we don't want to view switch anything here we can just remove yes use color schema right now i am going to clear declare a variable used const color schema so we can just remove this use and i am accessing the value using react native use color schema api as i mentioned what is use color schema api which is the by default setting returning from the device right so we are getting the value now i am going to declare this state function right so i am just scoping this one here fine now i am going to pass this value color schema right so either you can just return more specifically we can do one thing we can return this rather than passing the value we can just declare a condition here if it is dark then return the value true to the east arc right so if it is dark then the value of each dark will be true if it is not dark use color schema value will be uh false right so use color schema can be three values it can be three values either it will be returned dark you can check out the document here you can see or light like this another value return from use color schema or it can be null right now if the value of color schema is dark we are setting each dark values true that means device already in the dark mode okay now the next thing is we need to get a listener right whenever the value of color schema change we also need to change the value of is dark right so for that one what i am going to do i am going to create a use effect so use the fact you can uh create as a component did update right or command did a amount so here i am using as a component did update whenever the value of color schema change it it should also change the set is dark value right so we can just pass the logic here what is the logic color schema equal to dark okay so whenever the value of color schema change or the returning value of use color schema change this will change the eased rq value also right so it will call the set is dark and this will change the value right so we have created a listener for user use color schema right now we need to create the function for manual change user can come here and they can switch between colors right so this is a manual change so we need to create method for that one this we are achieving using context for that one what you can do and just going to create a default schema or default theme right here what i am going to do i am just copying this old okay copying this old then dark value i am supplying for my is dark okay now also colors if it is dark then i have to supply dark colors right otherwise light colors so here light colors now there should be a method to change this value right so the method only contain a value right so we can just check scheme ski if the scheme is dark then we can just call this method again set is dark scheme is equal to dark so what this method will do if we are calling this set schema with a dark value so it will change is dark if they are returning dark then it will be true otherwise say each dark value will be false so we are created a function to call or to manipulate this value using switch or we are changing the theme anywhere if you are changing team anywhere in the application you just need to call this method and pass the value so it will manually change our theme here now what we need we need to return this provider right so we can just return theme context dot provider so we need to supply a value to the provider right so we can just supply the value default theme okay now what we need to do we need to wrap the children into this provider right so just i'm going to wrap my children props dot children okay so we have created a room theme provider and team context now what we need we need to get a hook so we are going to create custom hook for consuming for receiving this value so for that i don't know what i am going to do here i am just creating a hook so for that one just creating a custom hook for uh accessing the values we can just assessing the values now what we can do you can just create a hook export const use use theme this is the hook which we are going to create and what we can do just consume this value for that one what we need use um context so this is the api provided by react.js for consuming the context right so we can just use context use context here we can just supply the context right so this context is here theme context now what is the here provider sorry should be provided right so this is the context we are going to use for consuming the values now before going to implement before going to use this uh provider what i am going to do i am going to delete all this logic okay now what i am going to do i am going to create a folder here screen okay so suppose such a assume that this is my first screen i am going to create a home screen here right so home screen dodges okay now what we can do we can just declare a functional component here import react from react now what i'm going to do i'm just declaring a home screen a functional component for rendering the switch right so just export default home screen now what we can do we can just copy this old method into our home screen you can just return it from here fine we can just make it here now the next thing what we need uh we can just import this home screen for now so we can just import home screen on app.js you can just import from src screen home screen now one thing we need to import is our provider right so we can just import so our provider is here so we can just copy theme provider from src so we can just theme team provider right now we can just remove this each dark here so we can just value we can just just remove this already so that it will not break on the initial render so i'm just passing white for now and here it is i'm passing us black and also i'm just consoling the value here right now because we are not i have that method for now yes white white fine now we can just wrap our home screen inside our provider just wrap now let's see what happen we can just restart our application once more so use date is not declared so we have some errors so we can just declare use date here so we can just also format the dock so use context also already be our provider so view is not defined on the home screen yes we are missing that view and switches so we can just import import view text switch from react native right yes now if i just there should be one value we can just return the false for now now again refresh oh yes styles eyelid should be not we can just copy this style into home screen and also i need to import style sheet right so you can just import style sheet fine now if i refresh let's see what's happening yes our initial screen is rendered now what we need we need to use this logic inside our home screen right for the next thing is we need to use our hook in our this component right for that on what we can do we can just import our hook so we can just import our use theme from uh team theme provider right now just go to the definition you can see use theme here so for this is my small fix we have to do here we are returning direct value i don't want to return right direct value here so for that one what i am going to do i am making this has a hook for that one what i am going to do i am making this as a function right you can you know if you want to see the difference we can just go here and console use theme so here i'm going to console theme okay just open my debugger and refresh the application yes you can see here it is directly returning the values i don't want to directly return the value i need to make this as a hook hook means it should be a function right so i am going to change this as a function here right so that function i can use in my component right so i am going to use this hook so what are the value it is returning one is dark and colors and set schema where the function we will get to change the value right so now what i am going to do i am going to distract this here dark and then colors then we can go here said schema right set schema then we can just use this hook here i'm just declaring the hook here now if you want to just check out just console here now once again i am going to reload the function so just sorry i'm just reloading my function here you can see it is returning the values said schema i am distracting that values here right in the function now what i am going to do i am going to remove this one fine now i am going to use the colors here right for using the colors what i have to do check i'm just checking the i'm changing the background color as colors.primary and text also i'm just changing it just look at the the should be a text right so i'm just changing into colors.txt right now if we just refresh the screen once more you can see it is written that correctly because initial uh initial uh theme is light theme right so if you just check out here dark the value of this will be false so that's why it is rendering as white now if i just change this value i need to need to change this as black right for that one what i am going to do i am going to supply the value for switch here is switch i am just supplying my value on value change what i need to do i need to call a function i am going to declare that function const toggle theme here i'm just declaring one function this is an arrow function and inside that one i'm checking if it is dark if it is already dark what i have to do i have to change this into light right i have to change this into light otherwise if it is not dark if it is light then i have to change into dark so three two value you can pass right either it should be light either it should be rock dark if you check out the documentation you can see either it should be dark or light so i have passed according to the condition if it is already dark i am changing into light if it is not already dark i am changing into dark now i need to add this function on valley change right i need to call this function on valley change now i just want to refresh my function if i just change see see the magic all the component all the function all the values are changed into according to our theme right background color is changed into black and the text is changed into a white color now it is accessing the colors of dark right if it is dark the background color is black and text color is white now if it is light theme what will be if it is light thin background color will be white and the test color will be black so we have managed all our theming concept or our theming logic inside this provider so main concept we have to declare a theme context and we have to define if it is already user color schema is coming from the device then we have to set that value and if we have to declare a method to change it manually that value you can use in the set is dark method here so we have managed all our team logic inside team provider hope you have enjoyed this lecture and we can meet on the next lecture thank you

Channel: JAS ACADAMY

Views: 5,578

Keywords: JASACADAMY, Technical, Coding, React native, nodejs, Devops, News, interview tips, resume format, resume writing, career, communication, social meda, time management, polytechnic, diploma, Perfomance, development, udemy, google, covid, jasacadamy

Id: JD5scyA6v0c

Length: 27min 59sec (1679 seconds)

Published: Thu Sep 22 2022