We're ready for our last step inside of our input component. 2
All we have to do is add some styling to style the view the text which is in your label and the text 3
input itself. 4
So just a little bit more to adding our styling will do the same thing as previous out in a styles object 5
at the bottom of the file. 6
So we'll say Clontz styles is an empty object. 7
And I think we're going to end up with three styles inside of here. 8
We'll end up with one for our label one for the text input and one for the overall container. 9
So the overall view tag right here. 10
So I'm going to immediately place the names of these three styles that I expect to have have an input 11
style. 12
We will have a label style 13
and finally a container style as well. 14
All right we've got a decent amount of Taipans Let's get to it. 15
First off our input style will have a color of 0 0 0 will give it a padding rights of five. 16
So this is going to make sure that it stands off from the left hand edge of rigor. 17
We don't want to beat up too closely so we just want to make sure that is a little bit of standoff wants 18
to do a padding left of five and then a font size of 18. 19
This additional font size of this larger font size right here is going to make sure the users can very 20
clearly see the text that they're entering into this field. 21
Next we'll add in a line height of 23. 22
The purpose of line height is not necessarily tied to the font size. 23
It's about how much space is in between each line of text. 24
So by increasing the line height here it's going to make the text inside that input just kind of stand 25
out a little bit more. 26
Finally And we're going to talk exactly the purpose of this one right here. 27
Add in a flex of two and we're going to come back to that in just a second. 28
So bear with me next to our label Styer style only a couple of here we will dial up the font size as 29
well to 18. 30
I'm going to add in a bunch of padding left to make sure that the label stands apart from the left hand 31
border over here and then I'm going to give this a flex one. 32
So let's take a second and discuss these flex values. 33
I want you to take notice that both the input and the text are children of The View tag right here because 34
they're both children. 35
They're siblings of each other might be a better way of putting it. 36
Whenever we have siblings with a flex property designated on the style objects the flex property is 37
how we allocate or a proportion available space to each one. 38
So the rule that we use is we say for each sibling in this case input style and label style we add up 39
the values of flex. 40
So two plus one that totals three. 41
Now we take two divided by the total of three. 42
That means that two thirds of the available space will be allocated to the input style and one divided 43
by three or one third will be added allocated to the label style. 44
As soon as we render this inside the simulator. 45
And as soon as we test it out I think that's going to start to make a lot of sense. 46
Let's finish up the style in here and see what it looks like. 47
So the last thing we have to do is our content or style and this container style is going to be applied 48
to the overall view tag. 49
So for our container container style we'll add a height of 40 flecks of wine to make sure that it fills 50
up all the available space that there is and then we want to make sure that the label and the text input 51
themselves show up alongside each other. 52
So kind of in the horizontal or road direction. 53
So to make these two items lineup in the road direction will give the container style a flex direction 54
of road. 55
Finally we will align items center to make sure that the items are lined up vertically. 56
All right so no lesson you have to do is take these three style properties and apply them to the different 57
tags in here. 58
So again we're going to use a little bit of destructuring to make that happen. 59
So we'll pull our input style our label style and our container style and we're going to pull all those 60
from our styles. 61
Object. 62
And then we'll apply them to each individual tag. 63
So the overall view gets a style of container style that text gets a style of label style. 64
And finally the text input gets a style of input style. 65
All right one last thing before we start in the browser we still do not have a label here. 66
So let's flip back to our loggin form where this input component is being used and make sure that we 67
pass the input a label to use in here. 68
So when we go back to my log and form you find my input and I make sure I pass it a label as well. 69
So I'll give it a label of what say. 70
Email All right. 71
So now is it time for the moment of truth. 72
We will refresh the simulator and. 73
OK. 74
Well you know what. 75
We're close. 76
But it looks like I probably made a typo in here I've got a warning down at the bottom. 77
Let's double check our property name. 78
It's giving me an error on a line specifically or a warning I should say. 79
And so I made a mistake here that should be a line items. 80
I'm almost positive I said a line item so I apologize for the confusion there. 81
So let's do another refresh. 82
All right. 83
Now this is looking pretty good. 84
Now I should be able to click in here somewhere. 85
Well it looks like perhaps there's still a little bit of a mistake in here. 86
So let's continue in the next section and figure out exactly why we can't click on the text input here 87
.