Now that we have our context set up, we want to put it in the right place, which means we have to
go over to Apache's and we have to import it from the favorites context provider.
So first of all, let me take this over here, duplicate the line and put favourite's, and then I'm
going to import it from favourite's favorites, dot context.
And then what I'll do is I will wrap the top of the tree from the context provided perspective and I'll
wrap all of the context providers with the favorites context provider.
And this will allow me to pass the methods down all the way through the tree.
OK, so now that the fever's context is set up over here, but we can go over to our features, we can
go to restaurants and we can go to the restaurant screen.
And what we could do over here is we already have used context set up.
So what we're going to pull in is the favorites context.
And we're going to pull in that from favourite's favorites thought context.
What will set up here is a.
And we're going to pull that from favourite's context, and if we console that log, this favourite's
what we're going to see in our log is an empty array.
And as we can see here, we're seeing the empty array show up after a rerun there.
And just to double check to make sure that this is the correct output, we can go and we can see Materi.
And I'm theories being pulled in three times because there's three different Rehren, there's because
the data comes in and the loading and all that good stuff.
So we know that our favorites are set up here.
But now what we need to do is we need to figure out, OK, how are we actually going to hook this up?
So let's remove this real quick and let's start thinking about it.
We don't want to prematurely go ahead and build a feature without thinking it through.
When we looked at our screen, what we saw was that there was a little heart icon in the top right hand
corner of every single one of these cards.
So does that mean that we should go ahead and go into the restaurant info card component and build a
favourite's icon right inside of here?
Well, we can do that.
We can definitely do that.
We could go ahead and put it right beside the restaurant card cover.
But the issue with that is going to be that there's also logic coupled to this favorites button.
So first off, let's go ahead and declare our favorites button.
We're going to call it favorite.
This is going to be the feature that we're going to hook up here.
So we're going to say, hey, we're going to have a favorite and let's call it a let's call it.
Well, it's not really a button.
It's more like an icon.
So we're going to call it favorite in this specific case.
So the favorite is going to position itself right along here, right next to the restaurant card cover.
And where are we going to declare it?
Well, that's a good question, because the favorite icon needs to work and a lot of different places.
So we could potentially declare it as a component.
And what we could do is we could say, here's a new folder called Favourite's and we'll put our favorite
thought component.
Favorite thought component of in their.
And that's going to be the component that holistically wraps the ability for us to favored something.
So how would that work?
What we're going to do in here is, first of all, we're going to get rid of the Earth, so we're going
to import, react from react and then we're going to export CONSED favorite.
And we're going to say that that is a component that returns null for now and then we're going to go
into our restaurant screen and we're going to say import favorite.
From that are such components of such components.
Favorite, favorite dark component.
And now we've gotten rid of the error and we can start building out the favored component.
So what is this component going to look like?
Because right now nothing is visual.
So let's close off our.
Find her here and let's go look at how we would build out this favorite feature.
And so if we look at it from a ten thousand foot view, what we're basically trying to get here is the
ability to favorite a specific item.
So what we're going to need here is use context, because we're going to need the methods from the context
and we're going to import favourite's context.
We're going to import that from Balthasar, that slash services, slash favorites, slash favorites
for context.
And we're going to see CONSED.
We're going to pull in favorites.
We're going to pull in, add to favorites, and we're going to pull in, remove from favorites our three
methods and we're going to do use context, favorites, context.
So now we've pulled in everything we need to kind of get it going here.
There's something else we need here.
First of all, we need our styles, components from style components native, because we're going to
add some styling here.
We're going to add some nice styling.
We're going to add something called and design from vector icons because we want to put in a nice Hata
icon there and then we're going to import touchable opacity.
And let's do that from react native and what we're going to do here is we're going to see that the CONSED
favorite button is equal to a style of touchable opacity.
And we're going to give a very particular styles, we're going to position it in a very particular way.
So here are the styles that I've kind of come up with.
We're going to give it background, color, transparent.
We don't need a border radius.
We're going to give it a background color.
We're going to position it absolutely and we're going to play around with the Top End right position,
but for now I've kind of given them free rein.
We don't need to the final with right now.
But what we need to define is a set index to make sure that it pops up to the top.
And we're going to put in the favorite button right in here.
And what we're going to do with this is inside of it, we're going to put an ant design in that ant
design is going to be a component that is going to take in an icon of the heart shape.
So what we're going to do is we're going to say name is equal to heart for now and we're going to say
that the size is twenty four.
And with that, we're going to also define the color as red just so that we can make sure that visually
we're seeing what we need to see.
And so right now, we can see that it is rendering in the top right corner.
So in the next video, let's look at improving the placement and actually hooking up the functionality.