Hi and welcome back.
We're very close to our finish line
for this application. So far
to finish up this module, all we have to do is create this page
here. And we're going to start off
by setting up the back button so
that we're able to navigate to the back page here in our application.
And I'm going to make this into
a component because we have this button on another page as well that we're going
to be working on later once we set up our payment system.
And I want to be able to reuse our code as much as possible.
And you should always be thinking about
reusability when you're creating your screens and components.
So we're going to make this
into a component because we want our code to be reusable.
And we're going to start with the back button navigation.
So we're going to create a new component and we're going to call it Back button.
And inside this component we're going to create a new file and we're going
to call it backbutton JS and we're going to create a style JS file as well.
And since our single donation items styles is already empty, I'm just going to copy
this code and I'm going to go to back button and I'm going to paste it there.
And here we can do the same.
Single donation item has just been set up so let's just use that.
And instead of single donation item we're
going to use back button and let's export that.
We don't need this here and we can delete this as well.
And now we have our back button initial step complete.
And what we do want to do is make sure
that this back button shows up on this screen.
And I don't know if you're noticing or not, but our screen is gray right now so
we're going to have to take care of that here.
Let's start with that.
First of all, I'm going to move this up
and I'm also going to use the safe area view and I'm also going to use the scroll
view from React native to set this page up.
And then I'm going to do safe Area view
here and I'm going to use some global styles for this.
And inside it I'm going to put the scroll view and I'm going to say that shows
vertical scroll indicator should be false because we don't want
to be seeing it when our screen is going to be scrollable.
Let's save this.
And now let's apply some styles from our
global styles that are very good that we have set it up because we do want this
reused as much as possible and let's import the global styles here as well.
Let's save it.
And now we see that part of our screen is white and because of that we're going
to be using the flex as well that's set up in our global styles.
So now whole our screen is white.
And what we do want to do here is put
the back button component that we just created and let's import this component.
And I'm going to organize our code and put the styles last.
And then what I want to do is go
to the back button here and I want to start creating this component.
First of all let's start with the fact that it is pressable, right?
So we're going to have to use
the pressable component and we're going to have to import it from react native.
So let's import pressable from react native.
And on press we want something to happen and what should happen
exactly is going to be handled from the parent component.
So we're going to have to use props,
and because we're going to have to use props, we're going to have to import prop
types, and we're going to say, here that we're expecting an onpress prop
that is going to be required and it's going to be a function.
And we're going to say here onpress use props onpress function.
And inside here we have the back arrow.
So we're going to have to use a fontawesome icon for that.
So let's do that and then let's search for faArrowLeft
and yes, it exists and we're going to use the solid icon for that and then again,
I'm going to sort these and I'm going to the here and let's save this.
And now we see the back button here
and our simulator is complaining that you're doing nothing on press.
So let's go to single donation item and say that on press.
What we want to do is use the navigation.
So here we're going to say navigation
and we're going to say navigation, and to go back, we're going to use a function
called go back.
So now if we were to press on this arrow, we would just go back.
But we do want to style it.
And let's start with the fact that we have for the whole page some kind of margins
so we have margin horizontal of around what?
20.
So let's create a style for our scroll view and let's just call it container.
And let's go to our styles here.
Define a container.
And we're going to say that margin horizontal is horizontal scale 20.
Great.
Now, we do want to set this button up better and follow our designs.
So for that, we're going to go to Styles
and we're going to say that we need a container here as well.
And that container is going to find what's the background color.
So let's just copy it from here and say
background color is this, and then it's going to have some height
and width, and it's 44 for width and height.
And again, our vertical scaling
and horizontal scaling is going to be returning different values and we have
to make sure that they are equal because this is a square.
So I'm going to use horizontal scaling for both.
And I'm going to say width horizontal scale is 44.
Height horizontal scale is 44.
And we're going to have to have some kind of border radius for that as well.
And I think because the color is so gray, you might not be able to see it clearly.
So for a while I'm going to change it
to something different and save it so that you can see it better.
And then I'm going to apply it to our pressable.
So let's say style container.
And now we see that this is a square, so we definitely do need a border radius.
So let's find out how much that is here.
It's given that it's 26.
So let's say border radius, horizontal scale, 26.
And now this is circular, but we do want this icon to be centered here.
So let's say align items center and justify content center.
I think flex one is automatically applied to every container that you make.
So we don't need to define it explicitly here.
However, if we did define it,
nothing would really change, so we don't really need it.
And now I'm going to go back to the original color and great, that's it.
We might need some kind of margin top,
which is seven, and we can apply it on our single donation item here.
And we can just apply it to our scroll view.
Let's say margin top, vertical scale seven.
Great so our back button is ready
and in the next video, on one go, we're just going to design the whole
screen given here and we're going to be done with this module.
So far, are you've done amazingly well.
Thanks so much for watching and I can't wait to see you in the next video.