1 00:00:00,900 --> 00:00:05,640 Our name and phone inputs and are in pretty good spot right now but we still done absolutely no work 2 00:00:05,640 --> 00:00:09,690 whatsoever on the picker widget that is supposed to exist right here. 3 00:00:09,690 --> 00:00:14,130 So the ticker widget remember its goal is to show a list of the days of the week to the user so they 4 00:00:14,130 --> 00:00:17,570 can pick one of those days for this employee to work on. 5 00:00:18,360 --> 00:00:23,060 We're going to make use of a re-act needed primitive for this picker. 6 00:00:23,070 --> 00:00:24,850 It is called the picker component. 7 00:00:24,910 --> 00:00:27,390 Like OK has a pretty reasonable name. 8 00:00:27,390 --> 00:00:29,260 Let's check out the documentation on it. 9 00:00:29,310 --> 00:00:34,050 Some over here at the reac native of documentation and on the left hand side I'm going to scroll down 10 00:00:34,050 --> 00:00:38,940 until I find a picture and I want specifically to use the picture and not picture. 11 00:00:39,050 --> 00:00:42,880 IOS picker Aiwass is obviously specifically for iOS. 12 00:00:42,960 --> 00:00:46,200 This picture one will work well on either iOS or Android. 13 00:00:46,200 --> 00:00:48,530 So definitely what we want. 14 00:00:48,570 --> 00:00:51,800 So here's a very simple example of the picture on the screen. 15 00:00:51,870 --> 00:00:53,840 The API is really not too bad. 16 00:00:53,880 --> 00:01:00,560 We will import the picker component from re-act native We will give it the currently selected value. 17 00:01:00,570 --> 00:01:05,280 So look at you know they're using the same pattern as us they're making what is called a controlled 18 00:01:05,280 --> 00:01:09,540 component which is one in which we tell it what its value should be. 19 00:01:09,720 --> 00:01:16,980 And then for each option in here as well we will add in a picture dot item component with a label and 20 00:01:16,980 --> 00:01:19,030 a value that matches up to it. 21 00:01:19,050 --> 00:01:22,830 Notice that label and value are separated out as two separate things. 22 00:01:22,830 --> 00:01:29,880 This is in case maybe you've got a like pretty English version of a label and then maybe a internally 23 00:01:29,880 --> 00:01:34,650 meaningful but not really user friendly value that you want to set as well. 24 00:01:34,650 --> 00:01:41,640 So maybe if you have a label of Java's a fast fantastic example right here the external label that the 25 00:01:41,640 --> 00:01:47,100 user sees is javascript but the internal value that your application is going to use is going to be 26 00:01:47,130 --> 00:01:48,400 G-S. 27 00:01:48,540 --> 00:01:50,150 Great example right there. 28 00:01:50,190 --> 00:01:57,760 So let's implement this picker component inside our application I'm in my employee create form. 29 00:01:57,780 --> 00:02:02,640 The first thing we're going to do is employee is import the picker from react native. 30 00:02:02,640 --> 00:02:12,100 So at the top we will add an import picker from re-act native and then I can scroll down to my unused 31 00:02:12,100 --> 00:02:13,090 card section. 32 00:02:13,130 --> 00:02:16,630 Here it is right here and I'll add in my picker 33 00:02:19,670 --> 00:02:22,220 will serve first with the picker options. 34 00:02:22,490 --> 00:02:28,330 So I need seven of these things I need a label and I need a value as well. 35 00:02:28,580 --> 00:02:34,430 So I'm going to just kind of put one empty one right here first and then I since I know that I need 36 00:02:34,430 --> 00:02:36,710 seven. 37 00:02:37,020 --> 00:02:38,420 One more. 38 00:02:38,430 --> 00:02:41,200 And now here comes the fun part Monday. 39 00:02:41,220 --> 00:02:42,360 Well here let's. 40 00:02:42,480 --> 00:02:45,660 Yeah well we'll just do this one by one. 41 00:02:45,850 --> 00:02:50,250 We're going to use a label and value of the same exact thing. 42 00:02:50,280 --> 00:02:53,190 We'll make it the property properly capitalized 43 00:02:55,620 --> 00:02:56,780 value of the day of the week. 44 00:02:56,790 --> 00:03:01,710 So for us label of capital in Monday value of capital and Monday as well. 45 00:03:02,160 --> 00:03:02,360 All right. 46 00:03:02,360 --> 00:03:04,710 Now here's where the fancy parts can come in. 47 00:03:04,710 --> 00:03:06,560 This is why I just started there for a second. 48 00:03:06,690 --> 00:03:09,520 I'm just going to use multi-select for the rest of these. 49 00:03:10,230 --> 00:03:16,050 If you are using atom or subline just in case you're curious you can highlight some little small portion 50 00:03:16,050 --> 00:03:18,810 of text right here and then press command D. 51 00:03:19,020 --> 00:03:26,190 If you are on a Mac to multi-select these two that will give you the multiple cursors and I can do like 52 00:03:26,190 --> 00:03:26,920 Tuesday 53 00:03:29,680 --> 00:03:32,350 and then repeat for Wednesday 54 00:03:35,730 --> 00:03:36,540 you get the idea 55 00:03:42,410 --> 00:03:43,420 Saturday. 56 00:03:45,160 --> 00:03:51,700 Sunday this would definitely not be a horrible place to do a little bit of iteration as well to build 57 00:03:51,700 --> 00:03:56,680 up this list of Pickert items if you want to make an array of days of the week and then map over it 58 00:03:56,770 --> 00:03:59,990 and produce one picture item for each day of the week. 59 00:04:00,160 --> 00:04:00,790 Go for it. 60 00:04:00,820 --> 00:04:03,560 That is a fantastic choice as well. 61 00:04:04,450 --> 00:04:04,800 OK. 62 00:04:04,810 --> 00:04:06,310 So that is our picker options. 63 00:04:06,310 --> 00:04:13,820 Now we need to make sure that we declare the selected value and an on value change as well. 64 00:04:13,870 --> 00:04:19,060 So although the picker API or using declaring the picker is a little bit different as far as setting 65 00:04:19,060 --> 00:04:22,050 the value it is completely identical as the inputs. 66 00:04:22,120 --> 00:04:27,490 So our selected value will be this start prop's shift. 67 00:04:27,550 --> 00:04:29,400 We do not yet have a shift. 68 00:04:29,410 --> 00:04:34,420 It is only when our form starts up that we're going to get this shift value of state. 69 00:04:34,420 --> 00:04:40,230 So then on value change this is what's going to be called whenever the Pickering's value changes. 70 00:04:40,310 --> 00:04:46,060 Be called with the value out of the option that was selected and for us that you know for us it's really 71 00:04:46,060 --> 00:04:46,500 the day. 72 00:04:46,510 --> 00:04:47,940 So I'm going to call it day right here 73 00:04:50,910 --> 00:04:54,590 then we'll call this not probs dot employee update. 74 00:04:54,600 --> 00:04:59,750 So remember we're using one action creator to handle all the different values that we're going to have. 75 00:04:59,910 --> 00:05:04,700 We'll give it a prop of shift and a value of day. 76 00:05:04,920 --> 00:05:05,540 And you know what. 77 00:05:05,730 --> 00:05:07,070 I don't know I picked day here. 78 00:05:07,200 --> 00:05:12,120 Let's go with the value as well just so we can keep the same pattern as what we use on the inputs as 79 00:05:12,120 --> 00:05:12,770 well. 80 00:05:13,140 --> 00:05:19,300 So we're going to change the argument to value and then we can shorten down the rest of the statement 81 00:05:19,290 --> 00:05:20,720 to just value as well. 82 00:05:21,210 --> 00:05:26,680 So value is my prop this shift with a value of value. 83 00:05:27,600 --> 00:05:28,200 Okay. 84 00:05:28,290 --> 00:05:29,730 So this sounds good. 85 00:05:30,210 --> 00:05:33,210 Let's do a quick refresh and see what it looks like. 86 00:05:36,090 --> 00:05:38,390 So will say test M.Com 87 00:05:41,050 --> 00:05:45,670 log with password and ha. 88 00:05:45,980 --> 00:05:46,990 How interesting. 89 00:05:47,000 --> 00:05:48,640 Here's my employee create form. 90 00:05:48,740 --> 00:05:53,270 It looks like there's definitely some height here but I don't actually see the picture at all. 91 00:05:53,630 --> 00:05:57,820 So this is one of those fantastic little gotchas in the world of re-act need. 92 00:05:57,840 --> 00:05:59,480 And there sure are a lot of them. 93 00:05:59,810 --> 00:06:02,320 That's why I'm here to help you out. 94 00:06:02,330 --> 00:06:03,340 That's my job. 95 00:06:03,650 --> 00:06:10,400 So by default the picker renderers with a zero with set to it to make sure that it expands to fill all 96 00:06:10,400 --> 00:06:12,170 the area available to it. 97 00:06:12,170 --> 00:06:17,880 We have to set a we have to tell essentially to expand to fill all that area. 98 00:06:17,930 --> 00:06:22,680 Now remember how we tell a component to expand to fill all the available area. 99 00:06:22,760 --> 00:06:24,170 We passed cities style 100 00:06:27,440 --> 00:06:36,650 Sorry style of flex one like so to pass in Flex one that tells it hey please expand to fill all the 101 00:06:36,650 --> 00:06:38,330 area available to you. 102 00:06:38,650 --> 00:06:40,040 So now I can sign in again 103 00:06:44,990 --> 00:06:51,170 go to the ADD form and boom there's my picker and so looks just like the normal US picture that you 104 00:06:51,170 --> 00:06:52,910 would expect to see. 105 00:06:52,910 --> 00:06:54,460 One thing you might find interesting. 106 00:06:54,470 --> 00:06:57,660 I've still got my android emulator open over here as well. 107 00:06:57,860 --> 00:07:02,030 So I'm going to do a quick refresh on it and then I will sign in 108 00:07:09,830 --> 00:07:17,950 and I'll go to the ad form and you'll notice that on here the picture still displays but is using the 109 00:07:17,950 --> 00:07:19,780 Android implementation of the picker. 110 00:07:19,780 --> 00:07:21,740 So it definitely looks a little bit different. 111 00:07:21,820 --> 00:07:25,960 It doesn't have the same kind of Scurlock thing here that you would expect to see on iOS. 112 00:07:25,990 --> 00:07:28,180 There's just a difference between the two phones. 113 00:07:28,270 --> 00:07:30,150 Totally fine to see this on Android. 114 00:07:30,280 --> 00:07:35,080 And you know it still works the exact same way I can pick just one option here whereas on iOS I use 115 00:07:35,090 --> 00:07:38,020 a little slider to pick the one that I want. 116 00:07:38,070 --> 00:07:38,410 OK. 117 00:07:38,440 --> 00:07:39,510 So this looks good. 118 00:07:39,550 --> 00:07:40,480 Let's continue. 119 00:07:40,480 --> 00:07:41,310 In the next section.