We now have a big button on the right hand side of our out that it will allow us to basically do anything
we want when we press on it.
So we need to now making new component that is going to serve for creating a new employee.
We don't have a form to show the user just yet.
So in the section we're going to put together some scaffolding for a new employee form or a form to
create a new employee and then we're going to make sure we can navigate there whenever we press this
add button.
So we'll start off with the form first in my component's directory.
I'll make a new file called employee create dot J.S. and then inside of a year we'll toss in a little
bit of boilerplate.
So import react and component components and from re-act will grab a view and text from re-act native.
I definitely expect that we're going to be using our reusable components instead of you in text but
for right now we just want to kind of get something on the screen.
We'll make an employee create form that will extend component
and from the render method
we return a view.
With some text it says like employee form.
And finally at the bottom will tell us on our export statement.
All right.
So just to get some content on the page something just get us started.
So we need to actually make sure that the router knows about this component here and Krita seem to represent
this component.
So we're going to flip on back to our router.
I will import our new form.
So import employee create from components employee create and I will make a new scene.
Now this is where I need to ask myself the question should this scene go underneath the kind of off
bucket or is underneath the main bucket.
And to answer that question I need to think about how I want users to navigate to this.
I want to use or sell the ability to navigate from the employee list to the employee create form.
And once they're on the create form if they decide Oh you know what I don't actually want to create
a new employee that they like don't press that back button I should kick them back to the employee list
component.
So it sounds like is going to be in this channel of all the different main scenes that I have.
It's definitely an added inside of your own make a new scene
that has a title of create employ.
So that's what the users are going to see.
Well give me a key in your let's get order of properties right here.
I want to see at least somewhat consistent.
We'll put the key first.
So we'll give it a key of employed create a component of employee creates That's what we need.
Yep and boy create and then we've got the title of create employee.
OK.
So this definitely looks good right here.
Let's see it.
I want to do a quick refresh.
See where we're at
all log in.
And you know I just realize we're testing it here but we haven't actually hooked up this button just
yet.
My mistake.
Let's do that first.
So on my scene for the employee list right now we've got a console log whenever someone presses the
on right button.
I want to navigate to the employee create screens employ create screen instead.
So don't remove the console log and remember how we do navigation with this routing library we call
actions dot and then the key of the scene that we want to go to.
So it'll be employee create.
I have not imported actions into this file just yet.
So I will also import actions from the re-act native router fluxed library area.
OK.
Now we should be in place where it actually works.
So I will refresh the simulator again
throw in our credentials.
Now I should really click add and I go over to my employee form and I can click back if I decide you
know what I don't want to make anything and then toggle between the two.
You'll notice that in the simulator I don't know if the video quite translates it.
Maybe you see it in your simulator.
It's a little bit like.
You know there's a little bit of jittery here once you're actually on a mobile device all that stuff
goes away and everything will work just fine.
So it's really just an oddity of the simulator that you see that little can a bit Jane Guinness.
Now just as a reminder we have two scenes inside of our main scene or the main bucket as I kind of like
to refer to it as the two scenes in here.
I start to want to think about how I'm going to use that initial prop.
Remember initially it was what is in charge of deciding what scenes didn't show up first.
So by default order of operations would excuse me order of declaration will come into play since the
employee list is declared.
First it will be shown first.
Whenever someone says hey go over to Maine please but just to make sure it's nice and clear.
I would probably choose to add on the initial prop here as well.
So now for sure.
Like without a doubt just in case anyone else comes across and adds a new scene here I don't have to
worry about a user going to that scene instead of the one I really intend to go to so I'm going to throw
the initial on there just to be a model citizen.
All right so we can now navigate over to our form.
I think that we can probably start working on that employee creation forum in the next section