Hi and welcome back to our tutorials.
The next thing that we're going to be building is going to be our button.
We are going to need a primary button
that's displayed at the end of the page for the details of the donation page.
So let's create this button component.
Let's go here and create a new directory
called button and inside here we're going to create a button JS file.
We're going to import react from react.
We are going to need a pressable
from react native and then we are going to create a constant
for button and this is going to return null.
So far we're going to export default button.
Great. Now we need a style for this.
Let's create a style sheet, create a constant style that uses the style
sheet to create our styles and then let's export default style.
Great.
So now what we're going to need here is
a pressable and this pressable is going to have a text
inside and this text is going to have a title.
So we do need a prop
here and since we have the prop we need the prop types
and then let's do button prop types and say that it needs a title that is
going to be required and is going to be a string.
Great.
Now other than the title we will need its
state whether it is disabled or enabled so let's say is disabled and this is going
to be a boolean, it's not going to be required.
We can set up a default value for this
and say that by default is disabled is false.
And let's set up Disabled State here and say props is disabled.
And then we are going to need some styles for this button.
So let's create those styles.
But we do need to be looking at how this button is looking like.
So let's import
our button from our components and use this button here with a title of Donate.
So now this appears here
but it doesn't really have any styles so let's work on that a bit.
Create a style and call this style button
and then we need to import our style
from styles and we do need to create a button style.
So our button is going to be following our designs from here
so let's explore what they have as their design components.
So first of all let's set up
the background color and that is going to be this value here.
Great. Now we do need the text styles for this as
well so let's create a style for that and that would be style title.
So let's go here and do some styles for title.
Let's click into here, go to inspect and let's see what they need.
So they need a font family of inter
font size with a scale font size function that is going to be 16.
And font weight is going to be 500.
And the line height is going to be scale font size 19.
Great. Now we missed the color which is white.
So let's give this some color.
Perfect.
And now this needs to be aligned in the center.
Perfect.
This button has some height which is 55.
So let's give it a height with a vertical scaling of 55.
Great.
And now we do see that Donate is right at the top.
So we do need to add something from flex.
So our flex direction by default right now
is column and to center this vertically justify content center.
Great.
So now we need some borders, which is 50.
So let's give this border radius of horizontal scale 50.
Perfect.
And I think our button is done.
Let's think about how we want this button to look like when it's disabled
right now it seems like it is enabled, but let's test that.
Let's say on press
console log pressed save this.
And let's go to our terminal and it seems like it's being pressed.
So let's say that if our button is
disabled we are going to add some styling here so let's say Props is disabled
added style disabled let's save this and go here and create
a disabled style and let's say whenever this is disabled it has opacity of 0.5.
So now let's test how that would look like from our home.
So let's create another button and say that it disabled
is true.
Great.
So now if we test whether
this is pressable we're going to see that it is not I'm pressing right now so
if I press this we'll get console log but on the disabled one I don't get it so
that's great, that's what we needed exactly.
We're going to need a function to execute when the button is pressed.
So let's say props on press is what runs when this button is clicked.
And let's set up a prop on press and it's going to be of a type function.
And let's set up a default value on press.
Just going to be an empty function. Great.
So now if we were to
go to our home and say that onpress we want a function to run
let's save this and let's say this should console log you just pressed to me
let's save this, go here and we see that our prop function works perfect.
I think we're all done with our button
component and now we can move on to something else.
Thanks so much for watching and I'll see you in the next video.