In the last section we put together the ability to text a user but whenever I press this button button
nothing actually seemed to happen.
So we've been of course full of gotchas nonstop.
This is one of the last got just going to throw out the.
Hopefully we'll see if we check out the docs for the rock native communications package.
Here's the text message method.
And if I scroll down a little bit you will notice that this will only run when on actual devices.
The Iowa simulator only supports the web method does not have the required device Capones Baba WA Android
emulator it can run everything apart from e-mail.
So the long and the short of it here is that on iOS the texting does actually work but it doesn't actually
work in the simulator.
So this is one of the difficulties of working with the simulator when creating react or really I should
say iOS applications in general not just react native.
On the other hand the fantastic part about re-act native is I can always pull up the simulator for Android
as well.
So I've got an android simulator up I can tap on Jane I can tap on text schedule and lo and behold I
get a window popping up that says Here we go here's my text message your upcoming shift is on Wednesday
Wednesday and the text is going off to 4 4 4 4 4.
So I could send this off if I so chose.
There we go.
Cool.
So this looks good.
I know that it's a little bit of a let down that ios doesn't support it but that's just more impetus
for actually getting this thing working on our mobile device.
So now it's time for us to move on to what's probably one of the last features we need to work on.
We need to add in a button to fire an employee fire is such a harsh term but I don't really want to
delete an employee either.
That's also pretty rough.
Basically fire an employee and whenever a user taps it I want to pop up a big motile to the user something
and say like oh hold up are you sure you want to fire this person.
You know that button is right next to text schedule.
So it would be a little bit very easy for our users to accidentally press fire instead.
And so I want to be able to make sure that they really mean to fire an employee.
So that means we need to figure out how to show specifically a motile to our users.
I don't want to kick the user off to another screen or anything like that.
I want to have specifically something pop up on the screen and really just demand the user's attention
like you got to answer a yes or no to this question to solve this.
We're going to use a nother primitive component in the re-act native world.
So I'm going to pull up the re-act made of documentation
years getting started.
That'll do.
And then on the left hand side we're going to scroll all the way down to our components.
I'm going to find modal so modal somewhat synonymous.
Not quite the same as pop up modal or something that's going to appear and obstruct everything else
behind it.
Or at least kind of put some fade or opacity and everything else behind it.
So the modal is a builtin or what I kind of like to refer to as a primitive component.
That is a part of re-act need.
And we can just make use of this thing that big properties that we're going to care about with this
model are the visible flag which determines whether or not you can see the modal the transparent flag
that means whether or not you can see through it to the content behind it the animation type says determines
how this thing gets shown to the user.
Like does it just pop into existence or does it slide in nicely.
And that's what solut slide here means.
And then finally we get the benefit of a little helper or I should say event handler here are called
on request close.
So if the modal gets closed by the user we get a callback that says hey you know this thing we can do
we can basically do anything in there that we would like the one very important item I want to throw
out there is that if you are an android it is required to pass in an on request close method.
So even if you don't want to do anything with this if you're an android you have to pass it in.
So let's give this a shot.
We want to put in our modal.
This is something that I expect that we might want.
Modals in many different areas of our application so maybe it's going to make sense going to make sense
to place it or to create it as a re-usable component.
So I think that that part makes sense right.
We might want to have yes or yes or no questions and many different locations in our application.
So maybe we should turn this into a reusable component.
I'm going to create a new file in our common directory and I'm going to call it confirm because even
though this is going to be a modal I want specifically a modal that has the ability to ask a user a
question like a yes or no question and says we're going to call it confirm then inside if you're in
a place in my boiler plate so import reaction and react I'm going to grab text you and motile from re-act
native and I also want to make sure they have some nice styling on this thing as well.
The motile that we're going to import here has no styling by default.
So again this is not that default pop up that you get on your iOS device like when it bugs you to update
your version of Iowa us.
This is something that we have just styled ourselves.
So to help us out with that styling or import card section and button from our reusable components.
Now before I tried doing like oh import from like I don't know index I want to point something out here.
This is a reusable component.
We are going to import it into index.
This file cannot therefore import index back.
Otherwise we get a cyclical dependency.
Now Knode can resolve those or bundler can resolve those but I highly recommend that whenever you expect
that you're going to have some cyclical dependencies.
You just import the stuff directly that you want.
So we're just going to import card section by itself from card section and button by itself from button
like so next I'm going to make my component.
I think this is going to be a very dumb component selling going to make it a functional component rather
than a class based as just about all of our others have at the bottom right now let's export confirm.
Remember that this is one of our reusable components.
So we need to export it as a named export.
And the last thing I want to do before we take a break is just flip over to index dot G-S in our common
directory because I do not want to forget to export this thing as I very frequently do.
Inside this file.
We will export Starr from confirm.
Like so.
OK.
Good start.
Let's take a quick break come back and finish up on this Modal