Hi and welcome back.
I'm so excited to say that this is
the last video in our series on using Redux and Reducers in React native.
You've all done an amazing job learning
how to use these powerful tools to manage state in your applications.
And by now you should have a solid
understanding of how to use Redux to store and manipulate data and how to use
Reducers to update that data in response to actions.
But this is not the end of our journey, it's just the beginning.
And with the skills that you have
acquired, you'll be able to build even more complex and sophisticated
applications that are fast and efficient and easy to maintain.
So let's take a moment to celebrate your hard work and dedication.
You should be incredibly proud of yourselves for making it this far.
And whether you're just starting out or you have been working with React native
for a while, you made great strides in your development journey.
And today we're just going to be
concentrating on building this screen for our donation items.
And this is going to be the last screen
that we're going to be building for this module.
So let's get started.
First of all, what I want to talk about is
the fact that we're going to be needing the information about the badge here.
And right now what we could do is either select the categories from our single
donation item screen to get the name of the category that we selected.
But the problem is going to be that each item is connected to multiple categories
and I think it's going to be very interesting to explore one
of the information that is useful to us because we have navigation.
So each screen comes with a parameter
called route and through the routes you can pass params whenever you're navigating.
So what I want to do is whenever a user selects something here,
I want to grab the category that they have used here to select that item.
So if they're navigated from environment,
then we're going to show them the environment badge.
If they were navigated from education then that's what we're going to use.
We could show multiple categories as well.
But what I want to explore with you is how
to use the params functionality from the root.
Otherwise you can feel free to just use the store and grab the information about
each category and that is not going to be hard for you.
So I'm going to just explore something new
with you and show you how to pass the params.
So first of all, you can pass the params very easily here.
You can pass any kind of param.
For example, I can just pass name Nata for example.
And if I save this and I go to single
donation item to console log routes value and open my terminal,
if I go to this item here,
you're going to see all of the information
that is passed through with root
and you're going to see that we have
params attribute here
and name is passed as Nata.
So what we could do is use the params
to pass information about
the category information.
For that I'm going to change the structure
of the donation items a bit.
Right now we use the mapping function
to directly return the component but I
want to reuse the code that we have here
about the categories and what I don't want
to do is just copy this and just paste it
here because that's going to be duplicated
code and I don't want to teach
you the best practices.
So instead of this, we're just going to
make this into a regular function body.
And we're going to say that we're
returning this component and above that,
we're going to define a variable and we're
going to call that variable
category information.
And then we can just copy this,
paste it here, get rid of the name so
that we have the information
about the whole object.
And then we can use this
categoryinformation name to display
the badges for the categories here.
And then what I do want to do is just
change the filtering here and just say
find because that's just more concise
and we won't have to grab the first
element and it's going to work
the same way it did before.
So we're going to see all
of the categories here as we were seeing
it before and we can then just use
this category information here.
And in JavaScript you could just say
category information and that would create
a parameter with the name of category
information and it would give it the value
of the category information variable here.
So if we come here and console log route params
and we go to this page here,
we are going to see that our category
information has been passed
and its name is Highlight.
So we're going to be
using this for our badge.
Now let's just go to our
design and see what we need and we're
going to see that the first thing that we
need is an image that will have a margin
top of 12 and margin bottom of 24.
So let's just create an image.
Let's import the image from react native
and here we're going to use the donationiteminformation.image to get
the Uri and we are going to have text
style it because otherwise this image is
not going to show up
on our screen as you see.
So let's go to styling and let's say
that we want an image and that it should
have margin top of vertical scale 12
margin bottom of vertical scale 24.
And then let's say that its width is going
to be 100% and it is going
to have some height.
And let's check out on our
design how much that is.
It's 240, so let's say height vertical scale 240
and then we are going to need some border radius.
So let's see how much that is.
That is 5 pixels as given here.
So we're going to use that information
and say that border radius is horizontal scale five.
And now this image is going to have
borders and since we already have all the information that we needed about
the badge, let's say that we have a constant here called category
information and we're going to use route params for that and category information.
And then what we're going to do is set up
a badge here and its title is going to be categoryinformation name.
And now the highlight is showing up here and we're going to put this into a view
container because the badge will
also need some margin bottom.
So let's use the view container
from the React native library and let's
set up a style for this called badge
and let's create it here and let's see
how much margin bottom this badge needs exactly.
So that is 16.
So let's say margin bottom, vertical scale 16.
And then we see that we
have a header component that we designed of type one given here.
So we're just going to do header
and we're going to import it from our components and we're going to say
that type is of type one and the title is going to be donationitemformation name.
And if we save this here we go,
our selected items title is here and then we need some descriptive text.
Okay, so we're going to need the text component from React native
and we're going to give it some styling and we're going to call it description.
And here we're going to put information on the donation item
information description. Here we go.
And then we're going to need some kind
of margin top and a little bit of margin horizontal as well.
But it's not really given here so I'm going to come up with something on my own.
So let's go to this description in our styles and let's say that needs margin top
of vertical scale seven as given and margin horizontal.
Let's say that it is seven as well and let's save this.
Great.
Our text is displayed in a similar manner as it is here but we do need to follow
the font stylings given here so let's just get to that.
Let's say font family is inter
and that font weight is
600 and line height is scale font size 29. Whoops.
Actually I'm looking at the wrong thing so we need to grab it from here.
So it is inter with font weight
of 400 and font size of 14.
Great.
So now this looks similar to here and then we need a button and that button should
always be at the bottom no matter how much content is given on the screen and we're
going to have to take it out of the scroll view because otherwise that button will be
placed here because our content ends here.
So let's create it outside of scroll view
and let's put our button in this view and let's use our components for that.
So it will be imported from our components and the title is going to be donate
and onpress so far it is going to do nothing. Great,
so this is already shown at the bottom
of this and the what we need to do is just give it some horizontal margins.
So let's call this button
and create a style for this here and then let's say margin horizontal
is equal to 20 as for everything else on the screen.
So great. Now this is perfectly set up but what we
do need to take care of if this text becomes very long,
let's say we copy it multiple times here so that our screen becomes scrollable.
We do see the text perfectly well but let's apply to some more margin bottom
to this text so that it's not so cramped up here.
Let's say that margin bottom's value is
going to be vertical scale 10 and now we're able to scroll more
and we have margin bottom of 10 compared to this bottom button given here.
So that's all we are done with the screen
and now if we reload our application
and go to environment we're going to see
an environment badge and information about that item.
If we go to education
we're going to see information about that specific education item.
So everything is working out and that's it.
You've done exceptionally well.
Thanks so much for watching and following so far.
You have all the knowledge that you need about reducers and in the next videos
we're going to be exploring some more interesting topics.
So stay tuned and I'll see you in the next video.