Hi friends and welcome back to our video tutorials about using redux with our
donation app.
Today we're actually going to dive into creating the homepage for our
application and we're going to start off by using this header container here so
that it appears for our application on the homepage.
So from the last videos I've cleaned up
this file and I've only left the dispatch and user and the safe area view.
The rest we're just going to build together.
And also I got rid of all the imports that we technically did not need.
So let's get started with this.
The first thing that we're going to have
to do is create a view container for our header.
So let's do that.
And I'm going to create a style for this
and I'm going to call it Header because that's what it is.
And I'm going to import view from here.
And then I'm also going to need import of style from our styles.
And I'm going to put all these styles
together and all the library imports together.
So then what we're going to do is actually
we're going to place a text given here that's hello inside here.
So let's do that.
Let's create text and let's say hello
comma and let's import text component as well and save this.
So now once we look at this we right away understand that we don't have
the dimensions for the paddings and margins set up.
So we're going to apply that directly to our header.
And also if we look at our home page we're
going to see that this is scrollable and we need a scroll view for that as well.
So let's create the scroll view first and put this inside the scroll view
and we're just going to say that vertical indicator should be false because I don't
really want to see it, I don't know about you.
And then I'm going to put my view container inside here and then I'm going
to apply the styles that we need for the header and for that I'm going
to go to the styles for our home and then I'm going to say that here we
need a header style and let's see the dimensions that we need.
So from this to the top there's a margin top of 20 so let's define that.
We're going to say margin top vertical
scale 20 and then let's see what's the horizontal one is 24.
So we're going to need marginal horizontal scale 24.
Great, now this is perfectly visible but it
does have a different styling for the font.
So let's come up something.
Let's call this style, let's say header intro text
and let's check out what font styling they have for this.
So as always they are using font family of inter.
Their font size is scale font size 16 and their line height
is scale font size 19 and they have a font weight as well
which is 400 and they have a special color that we're going to copy and paste here.
Let's get rid of this new line.
And now we need to apply this header intro text to this text here.
So let's say style header intro text and this is great.
These are very similar.
And then we also need to use our header component that we created together.
So let's import that from our components.
And then let's say that title is going
to be something that we're going to use from our user here.
So I'm going to say user first name plus space, user last name's first character.
And then we need a dot and then we need this emoji here.
So I'm just going to copy this emoji from here and paste it here.
Great. So this looks pretty similar to this
except for the fact that we need some spacing in between these two.
So I'm going to see what that is.
That is five.
So we're going to need some styling for the header.
But the thing is because this is a custom
component, I can't just apply styles to this.
So I'm going to have to put it in a view
container and I'm going to have to come up with some name for this style.
I'm going to call it username.
And then I'm going to create this username whoops I don't need closing here.
And I'm going to copy this username and going to paste it here.
And I'm going to say that margin top is vertical scale of five.
And now we see this spacing here.
And then we also see that there's a profile image given here and I don't
really want to download it and put in our folders.
So what I'm going to do is use an Uri for it and I'm going to put Uri here
and I'm going to say that profile image should be present here and its value is
something that I'm just grabbing from the internet.
Okay, so let's save this.
And now that I've saved this
in the initial state, I want you to see something.
Okay, so let's go to our home page here and I'm going to console log the user
information here and I'm going to open the terminal and I'm going to reload this.
And here we're going to see
that the profile image is actually not present here.
So it says that my profile image was present in the previous state but then
somehow it was updated to the text state and basically this was lost.
And this is because our initial state was already set up a long time ago and our
store is already filled with the following state that we worked on in our last video.
So if we want to update our initial state
and go back to our initial state so that we're able to see this profile image
later, what we're going to have to do is create a new function and call it reset
to initial state and usually people have this function available in their reducers.
Always set it up once you create a reducer for anything.
So to set up and change back to initial
state, all you need to do is return initial state and then you would need
to export this function to be able to use it.
And here I'm quickly going to dispatch that action to change my state.
And then I'm going to have to import this quick.
I'm going to save this.
And now my initial state and the user will show the profile image that I created.
So technically I can just get rid of this
now because my reducer contains the information that I need.
Great. So now what we need to do is create
an image here and that image is going to be coming from the React native.
Then it's going to need a Uri and I'm
going to use user profile image Uri for this.
And then I'm going to have to set some
styling definitely so that we're able to see this image.
So I'm going to call that styling file image and then we're going to need
a resize mode that is going to be of type contain so that it's contained inside
the dimensions that we define for this image.
So let's create this profile image style.
Let's see what it needs.
So it needs a height and width of 50 so
I'm just going to say width is horizontal scale 50 and height is vertical scale 50.
So now we should be able to see this
and if we compare we are string that all of these are shown in a column and we want
them to be in a row and we want some space in between these.
So with the terms that I'm talking about
already, you might guess that we need a flexbox here.
So we're going to say that we need a flex direction of row.
And then if we see this here,
we're going to see that some stuff is messed up for us.
And this is because we don't have the video container set up correctly.
We want these to be in a column.
We only want this whole container and this
picture to be in a row together and to fix that all we need is create a view
container for both of these and now they are in a column.
And we also know that we want these items
next to each other to be vertically centered.
So for that what we're going to need to do is use align items because now our items
are in a row which means that our cross axis is going to be needing align items.
So let's do align items center and now they are vertically centered and then what
we need is justify content space between so that there is pace between these items
and this is looking very good I must say very close to what we have here
but with a different profile image which is totally fine.
We could actually use the search box right in this tutorial because this should be
very simple to define because we have a component for that already.
So I'm going to create a view and I'm
going to style this view with a style of search box
and this search box is going to be needed so that we have the margin horizontal set
up here and let's import the search that we created together in the past module.
Let's save this. And here we see that we haven't created
text styles so there is no margin horizontal.
So let's create that and say margin
horizontal is needed and it is going to be 24 and this is looking much better.
It also needs a margin top of 20
so let's do that as well with vertical scaling of 20.
Great.
And it also needs a placeholder text that we haven't set up.
So let's go to the search component
and let's say that we need a placeholder that is by default going to be search
otherwise it's going to be whatever the user passes.
So let's make sure that we accept prop type of string here that is not going
to be required and that we set placeholder here that is going to be of value
props.placeholder save this and here we go.
The placeholder is visible and the next thing that we're going to have to do is
create this image that should be pressable and something should happen.
What I don't know yet but whatever
it seems like we have to press it because there's this check now text here.
So I actually already imported that image and called it highlighted image.
So all I'm going to do is I'm going to set up a pressable so that this is pressable.
And then I'm going to set up an image and I'm going to give it the source of two
directories up assets images and highlighted image.
And then again I'm going to give it resize
mode of contain so that it's contained in whatever I define.
And I have an error because I forgot to close the parentheses.
And now if we look here we see that this image is actually huge.
So we need styles definitely.
So we're going to need a style for the image itself and let's call it
highlighted image and we're going to need a style
for the container as well and I will show you why.
So if we go to the highlighted image and say that its width is 100%
because it should take up all the space except of margins and then we need some
height which is going to be vertical scale 160,
we're going to see that it takes up the whole space.
And even if we were to apply the margin horizontal 24 here, it's just going to be
using it from the left side and on the right side it's going to use
the width 100% that we defined here which we don't want to happen.
So what we're going to do is we're going to create a highlighted image container,
going to say that it's margin horizontal is 24.
So let's apply this style here and let's
say highlighted image container and that's it.
This is looking great.
And in the next video, what we're going to be doing is we are
going to be building select category list that will be using in our newly created
reducer that we're going to do together in the next video.
So stay tuned, we are having a great progress.
Thanks so much for watching and I'll see you in the next video.