Hey everyone and welcome back.
Today we're going to be talking about useContext hook in React native.
The useContext Hook is a very useful tool that can help us solve a lot of problems
related to sharing data between components.
In this lesson we'll learn what the useContext Hook is, why it's useful,
what problems it solves and when we should use it.
You're now looking at my screen
with my editor open, my simulator running, my Metro bundlers running as well.
And we're back to the Hello World application that we set up initially so
that I can convey to you exactly what useContext does once we start coding.
So now let's talk a bit about what is the useContext Hook?
Well, it's a built in hook in React native that allows us to consume a context.
And a context is essentially a way to pass down the data through the component tree
without having to pass props down manually at every level.
The useContext Hook allows us to access the value of a context in any component
that needs it without having to worry about prop drilling.
Now you might be wondering why is this useful?
Well, imagine you have a component tree with many levels of nesting.
You need to pass down data to a deeply nested component without use context hook.
You would have to pass props down through
every intermediate component even if this components don't need the data.
So imagine if you had
a home screen component and inside the home screen component imagine that you
have a book list for example, and inside this book list component you have a book.
Imagine that this is the part, the book is the part that needs
information and you want to pass it from the app component.
Now you would need to pass that prop to home screen.
Then you would need to pass it down
to booklist and then you would need to pass it down to Book just so that you
could use it inside books which is a lot of prop padding and it might get tedious
to control these many props inside each of these components.
So useContext could be helpful in this situation.
This hook solves the problem by allowing us to access context values directly
from any component in the tree without having to pass props down manually.
It also makes our code more modular since
we can create separate constants for different types of data and each
component can choose which context it needs to consume.
So when would you normally use useContext hook?
Well, we would use it anytime we need
to share data between components without having to pass props down manually.
This could include things like user
authentication data, theme settings or language preferences.
So let's take a look at a common use case
of dark versus light mode switch inside applications.
Imagine you have an app with multiple
screens and you want the user to be able to switch between a dark and light theme
without the useContext hook, it might be hard to track changes
on different screens for the light versus dark mode.
And you might have to pass props down through multiple levels of nesting.
So with the useContext hook we can avoid such a problem and we can start talking
about how we could do something like this using useContext Hook.
So here let's define a state that says
whether we're currently using dark mode or light mode.
So let's create a setter for this as well.
And let's say that we're not using dark mode in the beginning.
So now let's import useState here as well. Great.
So our dark mode is turned off in the beginning.
And now let's say that we have a function that toggles this theme and
sets the dark mode to the opposite of what is currently set to.
So if it is true, we're going to set it to false using this.
And if it's false, then it's going to be set to true.
Great.
So here we have the Safe area view with hello world component inside it.
But we actually want to somehow use this toggle theme function to make
sure that we can switch this application from dark to light mode easily.
So let's create a button here
and on press of this button, I'm going to import this button here,
and on press of this button I'm going to name it Switch Mode.
On press, we're going to call toggle Theme Method.
Now once we click this, our dark mode is going to be changing.
Let's put this whole string inside a view
container and let's import the view component here.
Great. So now let's give this for example,
a background color of I missed one 2.
A dark gray background color.
And then let's say that if
dark mode is on, then we're going to have the gray background color.
Otherwise our color for the background is going to be white.
Great. So now let's talk about this switch right
now if I click here, you're going to see that we have the dark
background, but if I click again, we're going to get the white background right.
And now let's talk about one thing.
What if we had a separate component called
Home Screen that also needed this information but we didn't really want
to pass a prop to it because technically we could have many more screens like that.
So if we want to not pass the value
of the dark mode to the home screen and still understand whether we have
a dark mode set or not, we would have to use contexts.
Let's create a new component and let's call it Home Screen.
So I'm going to create a new directory
of components and I'm going to create a home screen directory here.
And I'm going to create a new file called HomeScreen JS.
And here I'm going to import React from React and then I'm going to define
the home screen component and I'm going to return null
now, so far, let's just make this an exportable component.
So here, let's create a view container
and inside it let's place a text and this text will say welcome to my application.
Now let's import view and text components from React native here.
Great.
And then let's think about this, right?
We want somehow to understand which mode we're using, light or a dark mode.
So we're going to have to use useContext here.
So this is a hook that comes from React and we can say
constant isDarkMode is going to use the context and it is particularly going
to use the theme context that we have not defined so far.
So how do we use the theme context?
Let's just create this context.
Okay, let's create a new directory and call it contexts.
And let's create a new file called themecontext JS. Inside here
the only thing that we're going to do is
import create context from React and then we're going to export this context
called theme context and it's going to be equal to the new context.
Great, so let's just save this
and then what we want to do is import this context here inside our application.
So let's just import
theme context from our context directory themecontext JS file.
And then let's wrap the whole application code inside the theme context provider.
And the value of this constant is going
to be the dark mode variable that we created here.
So let's use this isDarkMode value.
Great.
And right after that,
let's just place our home screen right below this view container.
So let's use our home screen component.
And here let's import the theme context from our contexts as well.
And then what we want to do is use this
dark mode variable inside this component to determine what kind of background color
should be given to this particular component.
So we can just say that we want to use
a style here and background color should be set according to is dark mode value.
And if it is dark mode,
then we are going to use two two two color which is the dark gray color.
And otherwise we want to use F color which stands for the white one.
And now let's make sure that our text styles also changes according to this.
So the color if the dark mode is on
for the text should be white, otherwise it could be black.
Okay, great.
So now we see that there is no change because our dark mode is set to false.
But if I were to click on the switch mode button, look at what would happen.
Both of these components will have the same background color.
So this is the way the context works here.
The isDarkMode will be set to the same value as it will be inside the app
component because we have used the context sharing of information and we have given
the isDarkMode value to the theme context.
And this isDarkMode value is going to be tracked through every component where
we're going to be importing the theme context here.
So that's all on the useContext hook.
Hope you found this lesson useful.
Now you know how to use useContext hook
to share data between components in react native.
And in this example,
we used the useContext hook to create Dark versus Light code switch that shares
data between the App component and the home screen component.
You can feel free to use this concept in your upcoming projects later on if you
do decide to actually implement Dark versus Light code switch.
By using the useContext hook,
we were able to avoid prop drilling and keep our code modular and easy to read.
Thanks so much for watching and I'll see you in the next video.