We're almost there we've almost wrapped up our application.
We're just a little bit more.
The next thing I want to work on is some styling on the motile.
So again no selling by default.
We've really got to amp this thing up ourselves as before.
You know we're going to toss the styling on here.
Not still not a ton of stuff to learn about the styling.
Again with reac native You just kind of throw it on there and you're happy with it.
So let's define our styles object at the bottom.
We're going to have three different styles.
We're going to have a card section style.
This is something that we're going to pass to the card section will have a textile.
This will be for the text that we show at the top.
Can I ask to use your question.
And finally we'll have a container style.
Now this is the most important one right here and the container style the container style is what is
going to actually give us that nice kind of dark background that the user can see through and see all
the content behind it.
So the card section style all we have to do here just five content center by default the card section
uses to justify content.
Let's start we want to make sure that we center the content in there.
And I we're doing justified content center next for the text.
We'll do a flex.
One is make sure that the text can properly wrap on the page.
Will use a font size of 18 which is consistent with the font size we use everywhere else line to text
in the center of the screen.
And finally we'll give it a line height of 40 the line height is how much space is placed in between
each line of text.
And for us Functionally it's just going to give us a little bit of spacing between the text whenever
the event happens to wrap around the page.
Next we'll add a container style.
Will you do a background color.
And here's where the magic comes from.
I'm going to give it a string with R.G..
Zero zero zero zero point seven five.
So the reason Whoops sorry about that.
The reason I say this is the magic is the last value on here.
So our G-B were passing in 0 0 0 which is black point seven five means give us an opacity of three quarters.
This is going to make the container look just a little bit see through which is exactly what we want.
Next will give a position its position relative
a flex of one.
So it takes up the whole with the screen and we'll tell it justified content.
Center justified content center is what's going to make everything inside of that container appears
centered on the screen.
So the card sections will be centered on the screen.
OK.
Thing you have to do on here is make sure that we actually apply these styles because we've got a hefty
number of them.
I'm going to structure them ahead of time and then apply them on each of these elements.
So we'll pull out our container style our text style and our card section's style as well.
And those all come off of our styles object.
Now our view is going to get the container style
our card section will get the you guessed it card section's style.
Don't forget to apply it to only the first one.
We want only the first card section style to center the text on the screen.
Then we want our text to get the textile
cool.
All right.
I think that's about it.
Now we did all the development of this component basically in a black box and we didn't really tested
as we went through.
So we're definitely going to want to get this on the screen as soon as possible so we can test it out
and make sure we're doing the right thing here.
So let's flip back over to our employee at it and place this thing on the screen.
We've already hooked up that confirm to our index common file.
So here is our all of our imports from common.
We will also pull in that confirm the thing that we just created.
Now all scrolling down to the bottom where we're going to place it.
So this is what I like so much about this this model.
Oh we have to do is place it somewhere in this component.
So we're going to place it down here.
Here's my confirm
and then we'll pass it some text.
Are you sure you want to delete this.
Now here's the really important thing the very important aspect of this is confirmed by default is not
visible until we pass it a prop of visible.
Right.
We have to pass it like visible equals true.
So I can just toss this thing in here at any point in time and it will not be visible until I specifically
toggle it to be visible.
That's that's what's so fantastic about this confirmed box that we just built.
So I want to make sure that the user can only see this after they tap that delete button.
Right.
So I think that we will make a new card.
S. will place a button in it and instead of saying like text schedule save changes it will say just
fire employee or fire or delete whatever we wanted to say.
So above the Confirm message will plays a card section
this will contain a button and says I will go with fire employee.
Just be really clear about what it does.
All right so now the last big challenge here last big challenge as it relates to the modal Anyways let's
be honest here.
The last big challenge how do we make sure that the confirm is not visible by default.
Remember we have to pass this thing a visible flag.
So we are telling from employee edit when this thing should be visible.
It should be visible all the time we only sometimes want it to be visible so to toggle the visibility
this thing needs to go between true and false and that needs to be flipped whenever we press this button
right here.
So I don't know about you but this sounds like a great case for component level state to me.
And you might say wait a minute wait a minute week component level state we talked about that we only
use redux now.
Well we don't only have to use redux everywhere.
The visibility of this confirmed message it really is does not concern any other aspect of our application
whatsoever.
And so maybe it really doesn't belong in application level state.
So I think that we will add in a new piece of state called I don't know maybe motile visible show motile
about show motile and if it's true that the motile should be displayed otherwise it should not be.
So let's give that a shot.
Well first initialiser piece of state up at the top.
It's also a state show motile and by default I do not want to be visible.
So I will initialize it to False.
Now down inside my model again I will say this things visibility should be determined by this state
does show motile.
Now all we have to do is set up a press handler on our button to toggle the value of show motile Let's
do that really quickly just because it's so easy.
We can then go ahead and test this out in our simulator.
So we'll say on press and there's really no need to make a handler here we can just flip the value of
it.
So I'll say this starts set state show motile is going to be the opposite of this dot state DOT show
motile.
So you know this did end up being pretty long right here.
I'm going to leave it up to you as to whether or not you want to pull it out to a separate helper method.
This is really pushing the bounds of what I think would be irresponsible length for this.
All right.
So I think that we're just about to test this thing out.
I mean to save let's refresh our simulator.
I will log in
got a typo
I will tap on my employee.
Here's our fire employee at the bottom.
I'll tap it and boom we've got our motile message popping up to the user.
So are you sure you want to delete this.
And then we can either press yes or no.
Now at present we are not passing in that on accepter on decline.
Handler So if we click on to any one of these I expect they'll crash.
No it doesn't.
OK we're good in that regard.
But certainly there's no way to dismiss this message just yet.
So let's continue the next section and make sure that we add in the on press handler for each of these
buttons.