Our name and phone inputs and are in pretty good spot right now but we still done absolutely no work
whatsoever on the picker widget that is supposed to exist right here.
So the ticker widget remember its goal is to show a list of the days of the week to the user so they
can pick one of those days for this employee to work on.
We're going to make use of a re-act needed primitive for this picker.
It is called the picker component.
Like OK has a pretty reasonable name.
Let's check out the documentation on it.
Some over here at the reac native of documentation and on the left hand side I'm going to scroll down
until I find a picture and I want specifically to use the picture and not picture.
IOS picker Aiwass is obviously specifically for iOS.
This picture one will work well on either iOS or Android.
So definitely what we want.
So here's a very simple example of the picture on the screen.
The API is really not too bad.
We will import the picker component from re-act native We will give it the currently selected value.
So look at you know they're using the same pattern as us they're making what is called a controlled
component which is one in which we tell it what its value should be.
And then for each option in here as well we will add in a picture dot item component with a label and
a value that matches up to it.
Notice that label and value are separated out as two separate things.
This is in case maybe you've got a like pretty English version of a label and then maybe a internally
meaningful but not really user friendly value that you want to set as well.
So maybe if you have a label of Java's a fast fantastic example right here the external label that the
user sees is javascript but the internal value that your application is going to use is going to be
G-S.
Great example right there.
So let's implement this picker component inside our application I'm in my employee create form.
The first thing we're going to do is employee is import the picker from react native.
So at the top we will add an import picker from re-act native and then I can scroll down to my unused
card section.
Here it is right here and I'll add in my picker
will serve first with the picker options.
So I need seven of these things I need a label and I need a value as well.
So I'm going to just kind of put one empty one right here first and then I since I know that I need
seven.
One more.
And now here comes the fun part Monday.
Well here let's.
Yeah well we'll just do this one by one.
We're going to use a label and value of the same exact thing.
We'll make it the property properly capitalized
value of the day of the week.
So for us label of capital in Monday value of capital and Monday as well.
All right.
Now here's where the fancy parts can come in.
This is why I just started there for a second.
I'm just going to use multi-select for the rest of these.
If you are using atom or subline just in case you're curious you can highlight some little small portion
of text right here and then press command D.
If you are on a Mac to multi-select these two that will give you the multiple cursors and I can do like
Tuesday
and then repeat for Wednesday
you get the idea
Saturday.
Sunday this would definitely not be a horrible place to do a little bit of iteration as well to build
up this list of Pickert items if you want to make an array of days of the week and then map over it
and produce one picture item for each day of the week.
Go for it.
That is a fantastic choice as well.
OK.
So that is our picker options.
Now we need to make sure that we declare the selected value and an on value change as well.
So although the picker API or using declaring the picker is a little bit different as far as setting
the value it is completely identical as the inputs.
So our selected value will be this start prop's shift.
We do not yet have a shift.
It is only when our form starts up that we're going to get this shift value of state.
So then on value change this is what's going to be called whenever the Pickering's value changes.
Be called with the value out of the option that was selected and for us that you know for us it's really
the day.
So I'm going to call it day right here
then we'll call this not probs dot employee update.
So remember we're using one action creator to handle all the different values that we're going to have.
We'll give it a prop of shift and a value of day.
And you know what.
I don't know I picked day here.
Let's go with the value as well just so we can keep the same pattern as what we use on the inputs as
well.
So we're going to change the argument to value and then we can shorten down the rest of the statement
to just value as well.
So value is my prop this shift with a value of value.
Okay.
So this sounds good.
Let's do a quick refresh and see what it looks like.
So will say test M.Com
log with password and ha.
How interesting.
Here's my employee create form.
It looks like there's definitely some height here but I don't actually see the picture at all.
So this is one of those fantastic little gotchas in the world of re-act need.
And there sure are a lot of them.
That's why I'm here to help you out.
That's my job.
So by default the picker renderers with a zero with set to it to make sure that it expands to fill all
the area available to it.
We have to set a we have to tell essentially to expand to fill all that area.
Now remember how we tell a component to expand to fill all the available area.
We passed cities style
Sorry style of flex one like so to pass in Flex one that tells it hey please expand to fill all the
area available to you.
So now I can sign in again
go to the ADD form and boom there's my picker and so looks just like the normal US picture that you
would expect to see.
One thing you might find interesting.
I've still got my android emulator open over here as well.
So I'm going to do a quick refresh on it and then I will sign in
and I'll go to the ad form and you'll notice that on here the picture still displays but is using the
Android implementation of the picker.
So it definitely looks a little bit different.
It doesn't have the same kind of Scurlock thing here that you would expect to see on iOS.
There's just a difference between the two phones.
Totally fine to see this on Android.
And you know it still works the exact same way I can pick just one option here whereas on iOS I use
a little slider to pick the one that I want.
OK.
So this looks good.
Let's continue.
In the next section.