1 00:00:01,230 --> 00:00:05,040 The very last thing we have to do inside of our sign up function is make sure that we navigate our user 2 00:00:05,070 --> 00:00:08,490 over to our main flow remember inside of our apt J.S. file. 3 00:00:08,490 --> 00:00:10,140 We defined our main flow right here. 4 00:00:10,200 --> 00:00:14,670 That's gonna be all the screens that a user can see after they actually sign in. 5 00:00:14,670 --> 00:00:20,520 Now here's one little kind of nasty thing you might recall that inside of our last application in order 6 00:00:20,520 --> 00:00:21,620 to do some navigation. 7 00:00:21,630 --> 00:00:25,070 We passed a callback to our different action functions. 8 00:00:25,230 --> 00:00:30,630 So essentially right here as the additional argument to our action function we passed in something like 9 00:00:30,630 --> 00:00:31,420 callback. 10 00:00:31,560 --> 00:00:36,540 And then after we did all of our work inside this action function we then said something like If callback 11 00:00:36,840 --> 00:00:39,330 then go ahead and run that callback. 12 00:00:39,330 --> 00:00:42,430 Like so now this definitely works without a doubt. 13 00:00:42,450 --> 00:00:48,930 It's a valid approach but it's maybe not the very best way of handling things because the reason is 14 00:00:48,930 --> 00:00:54,750 that right now we are essentially relying upon a component to define some really important definition 15 00:00:54,810 --> 00:00:57,750 about what should happen after this action function runs. 16 00:00:58,290 --> 00:01:03,300 But in this case you and I know exactly what we want to do after we successfully sign in. 17 00:01:03,510 --> 00:01:06,200 We want to make sure that we navigate over to that other screen. 18 00:01:06,810 --> 00:01:12,750 So I think it might be just a little bit more ideal if we wrote in that navigation code directly inside 19 00:01:12,750 --> 00:01:14,070 this action function. 20 00:01:14,070 --> 00:01:19,650 So in other words right after doing our dispatch if we could call a function that said navigate to main 21 00:01:19,650 --> 00:01:24,840 flow that would then leave this action function really clear in nature it would be really obvious to 22 00:01:24,840 --> 00:01:28,010 other engineers who read this thing exactly what happened. 23 00:01:28,020 --> 00:01:33,630 Whenever we sign it we make the request store the token update our state and then navigate to main flow. 24 00:01:33,660 --> 00:01:35,360 No question about what goes on. 25 00:01:36,090 --> 00:01:40,740 So I want to figure out some way that we can trigger some navigation from inside of this function without 26 00:01:40,740 --> 00:01:42,720 having to pass in some callback. 27 00:01:42,720 --> 00:01:46,950 Now unfortunately this kind of relies upon making use of React navigation. 28 00:01:46,950 --> 00:01:52,770 And the reason I say unfortunately is well let's take a look at our app dot J.S. file it's inside of 29 00:01:52,770 --> 00:01:57,720 app dot J.S. we go through all this work of creating our navigators blah blah blah all that good stuff 30 00:01:57,720 --> 00:02:00,130 goes on but here's the problem. 31 00:02:00,270 --> 00:02:05,640 The only things inside of our application right now that can trigger navigation are components that 32 00:02:05,640 --> 00:02:08,510 are rendered by these different navigators. 33 00:02:08,580 --> 00:02:13,950 Remember every screen that we show here receives a props object that has that navigation prop inside 34 00:02:13,950 --> 00:02:14,330 of it. 35 00:02:15,750 --> 00:02:21,730 So it's that navigation prop that allows us to handle some amount of navigation or trigger that navigation. 36 00:02:21,930 --> 00:02:28,170 Getting access to that prop from essentially outside of a react component is rather challenging to do. 37 00:02:28,230 --> 00:02:33,050 We cannot just take like this switch navigator right here and say magically Hey. 38 00:02:33,180 --> 00:02:35,580 Please try to do some navigation for me. 39 00:02:35,640 --> 00:02:37,360 It's not quite how it works. 40 00:02:37,560 --> 00:02:41,820 You see the switch navigator that we create right here and all these different navigators are kind of 41 00:02:41,820 --> 00:02:48,830 like react component definitions the switch navigator itself is not actually a navigator per say it's 42 00:02:48,960 --> 00:02:54,180 instead kind of like a class of sorts or a function that could be used to create a switch navigator 43 00:02:54,450 --> 00:02:57,520 with all this configuration you see right here. 44 00:02:57,600 --> 00:03:03,180 So it's not until we actually render our app out of that app container thing right here it's not until 45 00:03:03,420 --> 00:03:09,360 that line of code actually runs that we actually get the functions or these functions are even created 46 00:03:09,630 --> 00:03:15,200 that allow us to actually start triggering some navigation so in other words we can't really somehow 47 00:03:15,200 --> 00:03:19,880 get the ability to navigate by just using something that gets returned by this block of code. 48 00:03:19,880 --> 00:03:25,430 Instead we have to essentially kind of hook in to that thing right there until that thing. 49 00:03:25,430 --> 00:03:30,810 Hey give me some way to navigate using all the functions that were just created inside of the navigators. 50 00:03:30,890 --> 00:03:33,150 More or less in that line of code. 51 00:03:33,410 --> 00:03:36,790 So I hope right now it sounds really confusing what I'm trying to say here. 52 00:03:36,800 --> 00:03:42,520 Essentially I'm trying to communicate is that getting access to navigation outside of a react component. 53 00:03:42,650 --> 00:03:48,100 So like from inside of one these action functions is just a little bit troubling with react navigation. 54 00:03:48,140 --> 00:03:52,540 That's pretty much it so let me show you how we're going to handle this. 55 00:03:52,560 --> 00:03:57,060 So just you know if you look at the react navigation documentation there is actually a guide to tell 56 00:03:57,060 --> 00:04:01,380 you how to do exactly what we're about to do but we're going to write out some code to do the same thing 57 00:04:01,380 --> 00:04:02,250 as that guide. 58 00:04:02,280 --> 00:04:06,330 That's way more simple and easy to understand then what the guide shows. 59 00:04:06,330 --> 00:04:13,370 So here's pretty much what's going to go on inside of our apt J.S. file a navigator is declared eventually 60 00:04:13,490 --> 00:04:16,460 essentially like in that kind of line of code right there right. 61 00:04:16,460 --> 00:04:18,730 But it's really hard for us to get access to. 62 00:04:18,890 --> 00:04:23,510 So to make sure that every other file inside of our project if it's not a react component to make sure 63 00:04:23,510 --> 00:04:29,090 that everything else still has the ability to navigate even if it is not tied to react we're going to 64 00:04:29,090 --> 00:04:35,030 make another file called navigation ref then inside there we're going to write out a clever little function 65 00:04:35,240 --> 00:04:41,030 that's going to get us access to the navigator that was defined over on that app line like that line 66 00:04:41,120 --> 00:04:44,280 right there then inside of navigation wrap. 67 00:04:44,320 --> 00:04:48,300 We're going to also export a function that can be used by every other file. 68 00:04:48,310 --> 00:04:53,350 That's not a real component inside of our project to actually trigger some navigation and navigate around 69 00:04:53,350 --> 00:04:56,740 two different screens now at the end of the day. 70 00:04:56,970 --> 00:05:00,940 The code that we're gonna write here is pretty simple and straightforward in nature. 71 00:05:00,960 --> 00:05:05,940 All I'm really trying to communicate is that it's just hard to get access to the navigator that is declared 72 00:05:05,970 --> 00:05:08,440 by react navigation pretty much it. 73 00:05:08,460 --> 00:05:09,900 So let's start writing some code. 74 00:05:09,960 --> 00:05:12,170 We're gonna create a new file called navigation ref. 75 00:05:12,270 --> 00:05:17,290 We're going to write out that clever function and the function to actually trigger some navigation. 76 00:05:17,460 --> 00:05:22,830 So back inside my code editor I'm gonna find my SRT directory and inside there I'm gonna make a new 77 00:05:22,830 --> 00:05:29,430 file called navigation ref dot J.S. so notice that I did not actually put this in any sub directory 78 00:05:29,430 --> 00:05:32,550 inside of s RC It's just inside the s RC directory. 79 00:05:32,550 --> 00:05:36,930 If you want to put this in some kind of like helper file sub directory or some like that feel free to 80 00:05:36,930 --> 00:05:37,430 do so. 81 00:05:37,440 --> 00:05:42,030 But for me it's kind of a central file and I just want to make sure it's easily accessible like everything 82 00:05:42,030 --> 00:05:44,370 else inside my project. 83 00:05:44,410 --> 00:05:50,050 So now inside of here we're going to write out these two things First off the clever function to get 84 00:05:50,050 --> 00:05:51,520 access to the Navigator. 85 00:05:51,700 --> 00:05:52,670 So here's what we're going to do. 86 00:05:52,720 --> 00:05:58,120 We're going to define a variable inside of here with the inlet keyword. 87 00:05:58,160 --> 00:06:03,010 No let means that we just want to be able to reassign this variable at some point time in the future. 88 00:06:03,050 --> 00:06:07,310 Now you've essentially got some storage mechanism inside this file. 89 00:06:07,420 --> 00:06:14,590 So here's our clever function we're gonna say export concept sets navigator this thing is going to be 90 00:06:14,590 --> 00:06:16,750 called with some navigation object. 91 00:06:16,780 --> 00:06:21,490 So that's going to be the actual thing coming from react navigation that it's going to allow us to navigate 92 00:06:21,490 --> 00:06:23,270 around two different screens. 93 00:06:23,470 --> 00:06:29,140 So we're gonna take that NAV thing coming from react navigation and just assign that value to our navigator 94 00:06:29,140 --> 00:06:30,220 variable. 95 00:06:30,300 --> 00:06:36,800 It's also navigator equals NAV and that's our clever function. 96 00:06:36,810 --> 00:06:41,580 Yep I know not really that clever but let's try to make use of it and then you'll see why it is kind 97 00:06:41,580 --> 00:06:43,570 of maybe just a little bit clever. 98 00:06:43,740 --> 00:06:49,950 So going to save this file I'm gonna go back in to act J.S. and then at the very top I'm going to import 99 00:06:49,950 --> 00:06:51,840 that function we just declared. 100 00:06:51,840 --> 00:06:55,500 So up here I'll say import set navigator. 101 00:06:55,560 --> 00:07:00,630 And notice that we're using those curly braces because we did not do a default expert here. 102 00:07:00,630 --> 00:07:03,000 We're going to eventually export multiple things from this file. 103 00:07:03,000 --> 00:07:09,490 That's why we are using it named exports as opposed to a default so I'm using the curly braces we import 104 00:07:09,490 --> 00:07:19,400 set navigator from source navigation RAF we're then going to take that function we're gonna go down 105 00:07:19,400 --> 00:07:22,730 to where we accreted that app component right there. 106 00:07:22,790 --> 00:07:27,980 Remember that app component is essentially created entirely by react navigation. 107 00:07:27,980 --> 00:07:33,430 So we're gonna pass in a prop called ref ref is going to receive an arrow. 108 00:07:33,430 --> 00:07:40,990 Function and inside of here all we're going to do is accept an argument that is essentially our navigator 109 00:07:40,990 --> 00:07:48,260 is the object that's going to allow us to navigate around so I can refer to that as navigator and I'm 110 00:07:48,260 --> 00:07:55,270 gonna pass that variable into our set navigator function and that's pretty much it. 111 00:07:55,280 --> 00:07:56,510 So what's going on with ref. 112 00:07:56,780 --> 00:08:02,470 Well more or less this ref thing right here is going to be a function that gets called with that object 113 00:08:02,480 --> 00:08:04,490 that allows us to navigate around. 114 00:08:04,520 --> 00:08:07,200 So this is kind of like a hook into our component. 115 00:08:07,220 --> 00:08:09,960 It allows us to get a reference to the Navigator. 116 00:08:10,160 --> 00:08:11,460 So we're gonna take that Navigator. 117 00:08:11,480 --> 00:08:17,300 The thing that allows us to navigate around we're going to call our set navigator function with it that 118 00:08:17,360 --> 00:08:22,880 ultimately is going to take that navigator thing and assign it to the navigator variable that we defined 119 00:08:22,880 --> 00:08:25,990 back inside of here at navigation ref. 120 00:08:26,060 --> 00:08:31,970 So now we've got direct access right there that object is the very special thing that allows us to navigate 121 00:08:31,970 --> 00:08:36,410 around and tell react navigation that we want to show a different screen to the user. 122 00:08:36,410 --> 00:08:40,910 It's now the last thing we can do inside this file is write out a function and export it. 123 00:08:40,910 --> 00:08:42,970 That's going to allow everything else. 124 00:08:43,070 --> 00:08:49,330 Like all of our non react component stuff to trigger some navigation so to do so we're gonna write out 125 00:08:49,330 --> 00:08:51,150 just a little bit of nasty code. 126 00:08:51,250 --> 00:09:03,240 So the very top I'm going to import something called navigation actions Rama react navigation and then 127 00:09:03,240 --> 00:09:11,110 down at the bottom I'll say const or expert const navigate and we're going to call this thing with the 128 00:09:11,110 --> 00:09:17,100 name of the route that we want to navigate to I'll be like route name and any pyramids or any parameters 129 00:09:17,180 --> 00:09:19,020 we want to navigate to that other out with. 130 00:09:19,160 --> 00:09:20,170 It's a route named right here. 131 00:09:20,170 --> 00:09:25,150 It's gonna be like the name of our routes we define back inside of app dot J.S. so like sign up sign 132 00:09:25,150 --> 00:09:31,510 in tracklist track detail and so on and then prams remember we've taken a look at Ramsey for that some 133 00:09:31,510 --> 00:09:37,060 information that we want to pass to the screen that we're about to show then inside of here to actually 134 00:09:37,060 --> 00:09:38,470 trigger some navigation. 135 00:09:38,470 --> 00:09:40,630 We're going to call navigator Dot. 136 00:09:40,630 --> 00:09:51,940 Dispatch and inside we will pass navigation actions dot navigate and we'll put in an object with route 137 00:09:51,940 --> 00:09:59,380 name as root name and parameters as Brahms and as you can probably guess we're gonna shorten both those 138 00:09:59,380 --> 00:10:04,480 down to be just right name and perhaps because the keys in the values are the same. 139 00:10:04,480 --> 00:10:05,560 So what's going on inside of here. 140 00:10:05,980 --> 00:10:12,310 Well it turns out that the navigator provided to us by react navigation has an internal API or essentially 141 00:10:12,310 --> 00:10:16,450 functions very similar to our all of our contact stuff works as well. 142 00:10:16,540 --> 00:10:18,280 So some of these words probably look familiar. 143 00:10:18,280 --> 00:10:20,930 Dispatch Yep very familiar actions. 144 00:10:20,950 --> 00:10:22,150 Yeah very familiar as well. 145 00:10:22,720 --> 00:10:28,930 So essentially by dispatching an action we are telling react navigation that we want to it to change 146 00:10:28,960 --> 00:10:32,360 its status and show a different screen to our user. 147 00:10:32,560 --> 00:10:38,110 So be under the hood behind the scenes react navigation is really doing the same stuff the same code 148 00:10:38,110 --> 00:10:43,210 that you and I are writing more or less so now anytime we call navigate we'll pass in the name of the 149 00:10:43,210 --> 00:10:48,700 route that we want to show and optionally some firearms as well that's then going to run to run some 150 00:10:48,760 --> 00:10:54,190 under the hood code right here that's going to trigger a change in state in react navigation and show 151 00:10:54,190 --> 00:10:56,800 some different content to our user okay. 152 00:10:56,870 --> 00:10:58,320 That's pretty much it. 153 00:10:58,330 --> 00:11:00,270 So last thing we'll do is a quick test here. 154 00:11:00,310 --> 00:11:05,410 So going to save this file it's now anytime we want to navigate around our application from anywhere 155 00:11:05,410 --> 00:11:07,220 outside of a react component. 156 00:11:07,240 --> 00:11:13,300 So in the case of our action function back over here all we have to do is import this navigate function 157 00:11:13,780 --> 00:11:20,960 and call it with the route that we want to navigate to a back inside of off context at the very top. 158 00:11:21,010 --> 00:11:27,640 I will import navigate from up one directory navigation ref. 159 00:11:27,650 --> 00:11:32,810 Once again notice that we're using curly braces because inside of navigation ref we export and navigate 160 00:11:32,840 --> 00:11:35,570 as a named export not default. 161 00:11:35,780 --> 00:11:42,670 So we have to use those curly braces back over here to then down inside of sign up right after we go 162 00:11:42,670 --> 00:11:43,890 through all this success stuff. 163 00:11:43,900 --> 00:11:49,570 The last thing wants to do is navigate to our main flow so we will call the navigate function and put 164 00:11:49,570 --> 00:11:56,260 in the name of the route that we want to navigate to so in our case we could say either just take us 165 00:11:56,260 --> 00:12:02,060 to the main flow or more particularly I think that we really want to go to the track list by default. 166 00:12:02,230 --> 00:12:05,660 We don't really have any data to show inside there right now but that's pretty much what we said we 167 00:12:05,660 --> 00:12:08,630 were going to navigate to after we successfully signed in. 168 00:12:08,710 --> 00:12:12,500 So we are going to attempt to just go directly over to the track list. 169 00:12:12,510 --> 00:12:14,460 So to do so I'm going to navigate right here. 170 00:12:14,460 --> 00:12:21,320 I got a pass in a string of track list like so just you know we could optionally have instead said main 171 00:12:21,320 --> 00:12:24,320 flow that is a valid target to navigate to. 172 00:12:24,350 --> 00:12:29,340 But I'm going be very direct and say just take me to the track list. 173 00:12:29,380 --> 00:12:30,430 So time for a test. 174 00:12:30,430 --> 00:12:34,930 Let's save all the changes we've made I'll flip back over. 175 00:12:34,930 --> 00:12:39,880 I'm going to again sign up this I'm going to sign up with a brand new email so I should not get any 176 00:12:39,880 --> 00:12:44,170 error message around something about an email being in use or something like that. 177 00:12:44,420 --> 00:12:48,850 It's going to use test 9 at test dot com which I've never used before. 178 00:12:48,850 --> 00:12:52,290 I'll enter my password and then sign up and it looks like. 179 00:12:52,320 --> 00:12:55,010 Nonetheless I've got something a little bit wrong here. 180 00:12:55,150 --> 00:12:59,830 So I can do just a little bit of debugging between this video and the next one because that really should 181 00:12:59,830 --> 00:13:00,880 have worked correctly. 182 00:13:00,880 --> 00:13:03,740 Second to just a little bit of debugging and to figure out what went wrong. 183 00:13:03,750 --> 00:13:04,060 Come back. 184 00:13:04,060 --> 00:13:06,450 The next video and actually get this thing working. 185 00:13:06,460 --> 00:13:08,820 So quick pause and I'll see you in just a minute.