1 00:00:01,040 --> 00:00:02,770 We've got Expo location installed. 2 00:00:02,780 --> 00:00:07,790 So let's start to make use of it to prompt the user and ask them for permission to track their location. 3 00:00:07,790 --> 00:00:10,400 This process is actually gonna be just a little bit complicated. 4 00:00:10,430 --> 00:00:15,000 Someone to very quickly show you a diagram of how we're going to do this any time they track create 5 00:00:15,000 --> 00:00:20,150 screen appears we're going to immediately prompt the user and ask them to track their location when 6 00:00:20,150 --> 00:00:21,080 we make that call. 7 00:00:21,110 --> 00:00:23,580 It is a async function call. 8 00:00:23,810 --> 00:00:29,570 So if the user decides to reject our request then the call is going to throw in air so we can use that 9 00:00:29,570 --> 00:00:34,280 thrown error message to determine whether or not the user granted us permission. 10 00:00:34,280 --> 00:00:38,430 So if the user does not grant us permission we will show an error message to the user. 11 00:00:38,510 --> 00:00:42,130 Otherwise if we do get permission we'll start the tracking. 12 00:00:42,260 --> 00:00:48,020 Now some point time later if the user ever returns back to this track create screen we are always going 13 00:00:48,020 --> 00:00:49,930 to rerun that permissions code. 14 00:00:50,150 --> 00:00:55,340 But if we ever call that permission stuff a second or third or fourth or however many times the operating 15 00:00:55,340 --> 00:01:00,620 system is going to automatically approve or reject us based upon whatever the user entered during that 16 00:01:00,620 --> 00:01:02,400 initial request. 17 00:01:02,450 --> 00:01:02,780 OK. 18 00:01:02,810 --> 00:01:08,800 So that mind let's flip back over to our track create screen and start writing out some code so inside 19 00:01:08,800 --> 00:01:16,630 of my track create screen at the very top I'm going to import a function called What's the name of it 20 00:01:16,690 --> 00:01:17,980 and pull it up really quickly. 21 00:01:17,980 --> 00:01:18,460 All right. 22 00:01:18,460 --> 00:01:19,200 It's a long one. 23 00:01:19,210 --> 00:01:22,140 That's why I had to look it up really quickly I did not recall it off the top my head. 24 00:01:22,150 --> 00:01:25,630 So it's request permissions async. 25 00:01:25,630 --> 00:01:26,980 Notice how it's permissions. 26 00:01:26,980 --> 00:01:34,480 So there is an S there at the very end and we're going to get that from Expo dash location now just 27 00:01:34,480 --> 00:01:35,100 a second ago. 28 00:01:35,110 --> 00:01:40,390 I said that we want to make sure that we attempt to request permissions any time that our track create 29 00:01:40,450 --> 00:01:42,880 appears on the screen of the device. 30 00:01:42,880 --> 00:01:47,020 So that's usually a sign remember anytime we say that we want to run some code any time a component 31 00:01:47,020 --> 00:01:47,680 is displayed. 32 00:01:47,770 --> 00:01:52,240 That's always a sign that we probably want to make use of that use effect hook from react. 33 00:01:52,240 --> 00:01:56,520 Some also go into import use effect from react. 34 00:01:56,540 --> 00:02:01,090 Finally we also said that if a user rejects that request we want to show an error message. 35 00:02:01,130 --> 00:02:04,070 So that would involve somehow rendering our component. 36 00:02:04,070 --> 00:02:08,660 And once again and he's and we talk about rendering our component or updating it we are always talking 37 00:02:08,660 --> 00:02:10,270 about making use of state. 38 00:02:10,280 --> 00:02:16,740 So I'm also going to import used state from react as well. 39 00:02:16,770 --> 00:02:21,030 So now inside of a track rate screen I'm going to first get started by making a little helper function 40 00:02:21,330 --> 00:02:25,780 that's gonna kick off this entire permissions process and then start watching the user's location. 41 00:02:25,890 --> 00:02:29,710 So I'm going to make a helper function called start watching. 42 00:02:30,000 --> 00:02:34,210 This is going to be an async function to make sure you get the async keyword inside there. 43 00:02:34,470 --> 00:02:40,690 Then inside the function I'm going to put a try catch statement together inside the tried case. 44 00:02:40,740 --> 00:02:43,720 We're going to start to request for permissions. 45 00:02:43,950 --> 00:02:45,500 So I'm going to say a wait. 46 00:02:45,720 --> 00:02:54,520 Request permissions async like so so if the user denies this request we're going to automatically fall 47 00:02:54,520 --> 00:02:59,560 into this catch case so he can use that as an opportunity to set some kind of error message and then 48 00:02:59,560 --> 00:03:04,850 display that air to the user let's just try to focus on showing that error message to the user for right 49 00:03:04,850 --> 00:03:05,530 now. 50 00:03:05,630 --> 00:03:09,950 So I'm going to add in a new state variable at the top of my component to track whether or not we have 51 00:03:09,950 --> 00:03:10,960 an error. 52 00:03:11,060 --> 00:03:20,030 So I'll make a new state variable called e r r short for error and set E R and by default its value 53 00:03:20,030 --> 00:03:21,200 will be no. 54 00:03:21,200 --> 00:03:23,130 So if error is equal to null. 55 00:03:23,150 --> 00:03:27,340 That means everything is OK if we fall into the catch case right here. 56 00:03:27,350 --> 00:03:29,290 We're going to update the value of error. 57 00:03:29,360 --> 00:03:32,290 So I'll say set error with E. 58 00:03:32,330 --> 00:03:33,170 Like so. 59 00:03:33,170 --> 00:03:37,980 So that's the error that comes out the catch case so now we've got this variable that's going to change 60 00:03:38,040 --> 00:03:44,020 over time depending upon whether or not we have an error message we can then use that to decide whether 61 00:03:44,020 --> 00:03:48,000 or not to show an error message to our user down inside of our ASX block. 62 00:03:48,010 --> 00:03:54,580 So right after my map I'm going to put in a ternary expression and I'll say if error is defined then 63 00:03:54,580 --> 00:04:04,150 I want to show a text element that says something like Please enable location services and then otherwise 64 00:04:04,510 --> 00:04:05,110 we'll just show. 65 00:04:05,130 --> 00:04:05,840 No. 66 00:04:05,860 --> 00:04:09,510 Which basically means of course show nothing. 67 00:04:09,550 --> 00:04:10,680 OK so it looks pretty good. 68 00:04:10,680 --> 00:04:14,470 Now the very last thing we need to do is make sure that we eventually call start watching. 69 00:04:14,490 --> 00:04:18,640 So once again we want to call that anytime our component is first displayed on the screen. 70 00:04:18,750 --> 00:04:23,880 So make use of that use effect hook so right after start watching. 71 00:04:23,880 --> 00:04:25,950 We'll call use effect. 72 00:04:25,990 --> 00:04:32,990 Passing a function inside there I'll call start watching and we probably only want to run this code 73 00:04:33,020 --> 00:04:36,210 one time when our component is first displayed on the screen. 74 00:04:36,290 --> 00:04:40,720 So going to pass in as a second argument an empty array like so OK. 75 00:04:40,760 --> 00:04:42,390 So that should be enough to get started. 76 00:04:42,460 --> 00:04:46,660 Now before I test this there's one quick thing I want you to understand right now the only thing we're 77 00:04:46,660 --> 00:04:50,530 doing is requesting permission from the user to track their location. 78 00:04:50,800 --> 00:04:53,500 And then if they reject it we want to show an error message. 79 00:04:53,500 --> 00:04:58,250 So right now we are really testing the case in which we reject this now. 80 00:04:58,260 --> 00:05:06,060 The issue here is that at present on ISIS or at least on the ISIS simulator that I'm running if I reject 81 00:05:06,060 --> 00:05:08,470 permissions it does not result in an error. 82 00:05:08,640 --> 00:05:11,800 And that is a bug with the expo location library. 83 00:05:11,820 --> 00:05:15,350 So when I test this out on ISIS I am not going to see an error message. 84 00:05:15,360 --> 00:05:17,300 And once again that is a bug. 85 00:05:17,370 --> 00:05:22,110 Now hopefully by the time you're watching this video that bug will be fixed the code that we have right 86 00:05:22,110 --> 00:05:24,920 now should work correctly on Android and I'll be able to show it to you. 87 00:05:24,930 --> 00:05:30,570 But once again there is a bug inside the expo location library where rejecting permissions on IWM is 88 00:05:30,570 --> 00:05:34,150 just not resulting in an air OK. 89 00:05:34,180 --> 00:05:36,770 So going to see this file and then I'll do a quick test. 90 00:05:37,300 --> 00:05:42,100 So back on my IOW device right here I'll go over to track create. 91 00:05:42,340 --> 00:05:46,510 Now when I go to check right you'll notice that I do not get any kind of permission request right now 92 00:05:46,980 --> 00:05:53,140 and that's because I have already approved this expo application to use location services at some point 93 00:05:53,140 --> 00:05:53,740 in the past. 94 00:05:54,340 --> 00:05:57,070 So this kind of throws us into an interesting little bind here. 95 00:05:57,130 --> 00:06:02,440 You might have seen the pop up right away but once you click confirm or reject or whatever you hit Well 96 00:06:02,440 --> 00:06:06,430 you're never gonna see that window again because remember we only get displayed at that pop up window 97 00:06:06,430 --> 00:06:11,880 one time once a user grants permission or rejects it any time we call it request permissions. 98 00:06:11,890 --> 00:06:18,240 Again the underlying operating system is just going to automatically resolve that thing for us so this 99 00:06:18,240 --> 00:06:18,610 really. 100 00:06:18,610 --> 00:06:23,590 Like I said throws this into an interesting question how do we actually effectively test out this permission 101 00:06:23,590 --> 00:06:29,530 stuff repeatedly if every single time we do it it's going to be resolved automatically one way or another 102 00:06:29,530 --> 00:06:31,320 by the operating system. 103 00:06:31,330 --> 00:06:32,500 Well that's a really interesting thing. 104 00:06:32,500 --> 00:06:36,100 So let's take a quick pause right here we're gonna come back the next video and figure out how we can 105 00:06:36,100 --> 00:06:39,030 kind of really effectively test this permission stuff.