We've got our picture in place.
But I'm really going to nit pick here just a little bit and mention that this picture does not have
a label right.
We don't actually see anything here like hey pick the employees shift users really need to know what
they're selecting here.
So we should really make sure that we have a label here as well.
So to add in the label we will make a separate component this time around.
Just because you know we have to kind of specify the days that we here it's a lot of customization for
a reusable component.
I think that this is maybe a reasonable case to just have the raw picker in here to add in a label.
We will need to import a text element from re-act me as well will place a text element in the card section
right above the picker and will style it appropriately to make it look like a label.
So if at the top I'm going to import my text tag from re-act native and then back down.
Right above the picker word in our text.
Whoops.
And I think it would be appropriate to just how these things shift.
You can have it you know something more Burby might be like select a shift that might be good as well.
And I'm going to give it a style of styles.
Dot picker text style maybe also pick her label syle might be appropriate as well.
All right we have not yet to find our styles object so scroll down to the bottom and make sure we define
that.
So right above map stage props say styles is an object with a picture text style.
This will have a font size of 18 in a padding left of 20.
So just some.
So I need to dial up the size and the padding left is going to make sure that it stands off from the
left hand side of the form and lines up nicely with the name and phone here as well.
All right.
Let's do a quick refresh and see how this looks.
So in my ad form.
Hmm interesting.
So it looks like we definitely have the label on here.
It's in a good spot.
It has correct text correct size everything looks good but if you look down now our picture is a little
bit off center whereas before is nicely centered inside this card section.
You can see that now it's going to offset by the label that we put in here.
The issue here is that the card section component has a style of flex direction row.
If you recall that means that all of the card sections children will be laid out going from left to
right.
So first there's the shift that takes up the full height of this thing.
And then the next element in here will be placed to the right of that label and that's exactly what
happened with this picture right here.
So for this particular card section we really want to have a layout going from top to bottom or a flex
direction of column.
In other words we want to override this very specific card section style with some custom style that
we can pass into the card section right here as a prop.
So we need to make sure we can override the styling inside of this very particular card section right
here.
So that's the goal.
There's really no great leading and I can give you for the methodology here this is def. those places
we're going to throw the code on the screen and then talk about how it works.
So inside my employee create form.
Here's my card section.
I'm going to give it a prop of style and then to that I will pass an object with flex direction column.
Now I want to point out to you that on all of the primitive elements that we've used so far like text
or picture or touchable opacity whatever might have been all those except a style prop and re-act native
internally makes use of that style problem.
This card section here however it is a start.
It is a component that we put together and there is nearly no property that will be automatically consumed
for us are automatically used when it's a component that we put together.
So just because I added on style in here doesn't actually mean that it's going to do anything meaningful
inside of the card section component.
I have to open the card section component and make sure that I make use of this prop that I'm passing
to the card section and I have to do this because it is a component that we created.
So I'm going to open up the card section.
Here's my card S. component.
We haven't looked at this thing in a while right.
So now my props object I'm going to expect it to maybe have a prop of style on there as well.
So I need to somehow make use of that prop inside this component.
Essentially what we want to do is take these styles dot container style and then overwrite it with any
additional styles that were passed in on the props object.
This is another location where you go through the code up to talk about what it's doing.
I'm going to wrap the styles container style with an array as the second argument I'll pass in prop
Staats style suits me props the real style.
So this is a nice little trick with styling and react native right here.
This style prop that gets passed to any primitive element like a viewer or a text can take an array.
If we pass in an array of styles then the style most to the right will overwrite any style on the left.
So a nice little trick here right.
What this does is it's going to say hey use the container style.
But if there is anything better being passed along on props out style use that instead.
So basically exactly fits our use case because by default we want to have a flex direction of row unless
we specifically pass an override of flex direction column.
All right.
So I flip back over to employee create.
I'm going to refresh my simulator and see how we look now.
So log back in
go to my form and hot dog.
This looks a lot better now when the form starts off and it's on Monday.
It does look like there's a lot of white space right here but really that's you know that's just how
a picture with iOS works.
Once the user starts to scroll up they're going to see OK that's why there is that white space right
there.
So certainly when I start to go to like Saturday it is very clear why there's the white space above
the Monday on the form.
OK.
This looks good.
I think we are finally just about ready to start saving the data that this form is producing.
Let's take care of that in the next section.