In the last section we placed some styling inside of our head or component I want a glance back at our 2
mock up real quick and I just want to point out the intent here is that our text should be centered 3
within this larger rectangle thing right here and definitely the intent with this larger rectangle is 4
that we should have a border on the bottom just to make sure that it's clear that hey you know this 5
is the header section right here. 6
So we need some mechanism some nice way to make sure that we can censor the text on here and also make 7
sure that we've got this kind a nice border on the bottom. 8
So you know flip back over to our code so that text tag that we're using right now is just about showing 9
text and it doesn't really have a lot of leverage for kind of positioning itself about the screen whenever 10
we want to move elements around on the screen or kind of center it as we just saw. 11
We're going to use a different tag called The View tag will import the view tag from the re-act native 12
library as well. 13
The view tag is another kind of primitive element that we can use to position elements or wrap certain 14
elements and style elements inside of our application. 15
So let's check out a diagram or a quick Riego. 16
So this is kind of a representation of how we're going to use that view tag. 17
We're going to use the view to kind of use up all this extra space and we're going to give it a set 18
height more than what the text tag takes up by itself and inside of The View is going to be the text 19
tag. 20
So we're going to wrap the text tag with a view so let's fix up our GSX to reflect that. 21
Remember GSX for the most part the Hayes just like HCM. 22
So because this is now going to be a multi line GSX statement I'm going to add in my parentheses like 23
so make sure that you did not leave the semi-colon at the end of the text tag over here and then next 24
will wrap the text tag with a view so now are showing a view and inside of it is our text. 25
So you can think of this view tag as being really a utility knife of sorts as it fills many different 26
roles. 27
In this case we're wrapping our text with a new tag to make positioning easier. 28
We'll set a height on that tag which will function as kind of more like the wrapping box of sorts and 29
position that text tag within it. 30
OK. 31
So now that we've got our multi-line GSX tag here let's add in some additional styling. 32
So you style this view tag inside of the styles object at the bottom allowed on another object property 33
called view style. 34
And then inside of here will be some additional number of rules to styles specifically just the view 35
tag. 36
First we'll make sure that everything works by just setting up a background color. 37
So set a background color with the you know you might guess background color property and when it pass 38
it a color F-8 F-8 F-8. 39
This is hexadecimal right here it's going to appear as kind of like in a neutral egg white sort of color 40
in general. 41
You know again all the CSSA properties are all the style properties I should say tend to map up to the 42
CSSA equivalents. 43
You can check out the reality of documentation to figure out all the different styling properties throughout 44
the course. 45
I'll be throwing just a ton of different properties on here so you can either go check out the documentation 46
to figure out all the different properties or you can just stick around here and will definitely be 47
using a whole bunch of them over time. 48
So next now that we've defined the view style we will define it inside of our component as well as say 49
View style and then we'll use it on the View tag and we'll define it just the same way as we did earlier 50
by passing in this style of Propp. 51
So I'll say style is use style. 52
Again you might be curious why we don't just say you know style doesn't use style and style. 53
Textile right here. 54
The thought process is that by using destructuring we just remove duplicate references to this styles 55
object so totally up to you if you don't like doing the destructuring ahead of time. 56
You I'm not going to cheat on that. 57
You could just as easily say styles dot style. 58
All right. 59
So let's again refresh our simulator and make sure that the color is being applied properly. 60
OK. 61
So it's very subtle and it probably doesn't even show up on the video. 62
But the there's definitely kind of like again kind of a subtle off white coloring to our head or right 63
here being applied by that background color that we applied as the view style. 64
So definitely good for a start. 65
Let's continue on the next section and use this view tag to start positioning our text in the nice center 66
middle of the header area. 67
So let's continue that in the next section.