1 00:00:00,870 --> 00:00:06,100 In the last video we spent a little bit of time setting up our router component inside of the router. 2 00:00:06,120 --> 00:00:12,210 We place two scenes one scene was the root scene and every other scene that we add will be a child of 3 00:00:12,210 --> 00:00:14,280 this route one inside of there. 4 00:00:14,280 --> 00:00:18,720 We also added a scene that we will refer to as the log in scene. 5 00:00:18,930 --> 00:00:24,000 When we did so and then refresh our application in the simulator we can now see that we automatically 6 00:00:24,000 --> 00:00:27,630 got a header generated and displayed on this page right here. 7 00:00:27,930 --> 00:00:34,500 So what you see is a header that is being generated by this scene right here because we provided a title 8 00:00:34,500 --> 00:00:41,000 prop of Please log in we can see Please log in at the top. 9 00:00:41,010 --> 00:00:42,940 Now this definitely is a good place to start. 10 00:00:42,960 --> 00:00:47,280 But of course whenever we are talking about navigation we're really wanting to make sure that we can 11 00:00:47,280 --> 00:00:49,770 show multiple components on the screen. 12 00:00:50,040 --> 00:00:55,680 So at this point I think that we should add in another test component of sorts and wired up into our 13 00:00:55,680 --> 00:01:00,860 router and get a better idea of how we can somehow navigate between the two. 14 00:01:00,870 --> 00:01:06,030 So inside of my code editor I'll find the components directory and inside of components I'm going to 15 00:01:06,030 --> 00:01:10,830 make a new file that I will call the employee list component. 16 00:01:10,830 --> 00:01:12,240 So employee list. 17 00:01:12,360 --> 00:01:18,430 Yes eventually we will use this component to show a list of employees to the user. 18 00:01:18,540 --> 00:01:24,570 But right now we're just going to use it to test a little bit of navigation inside of employee list. 19 00:01:24,570 --> 00:01:29,160 Let's set up a little bit of boilerplate just to have some stuff to show on the screen so we can navigate 20 00:01:29,160 --> 00:01:33,220 between this thing and the log in form at the top of the file. 21 00:01:33,240 --> 00:01:44,280 I will import react and component from re-act import view and text from re-act native and then we'll 22 00:01:44,280 --> 00:01:48,370 make our class employee list. 23 00:01:48,420 --> 00:01:55,950 This is going to extend our component base class we'll define a render method in here and return a little 24 00:01:55,950 --> 00:01:59,020 bit of just kind of garbage GSX for right now. 25 00:01:59,310 --> 00:02:04,860 So make a view and inside of there I'll put a couple of text tags that just have a little bit of gibberish 26 00:02:04,860 --> 00:02:05,490 text. 27 00:02:05,700 --> 00:02:10,310 So nothing really meaningful here is going to say something like employee list. 28 00:02:10,610 --> 00:02:15,720 I'm going to copy that down a couple of times just so we have something to look at. 29 00:02:15,720 --> 00:02:22,770 Finally at the bottom the file I will export the employee list so export default employee list like 30 00:02:22,780 --> 00:02:24,770 so. 31 00:02:24,800 --> 00:02:25,100 All right. 32 00:02:25,100 --> 00:02:30,470 So we've now got another component to add into our router so I'm going to close this file and then go 33 00:02:30,470 --> 00:02:33,320 back over to our router file at the top. 34 00:02:33,320 --> 00:02:42,720 We will import the employee list component that we just made with import employee list from components 35 00:02:43,200 --> 00:02:45,630 employee letzte. 36 00:02:45,640 --> 00:02:47,120 All right now here comes the fun part. 37 00:02:47,330 --> 00:02:52,600 Any time we want to add another component that a user can navigate to inside of our application. 38 00:02:52,630 --> 00:02:55,370 All we have to do is create another scene. 39 00:02:55,570 --> 00:03:01,280 So underneath our current scene of the log in scene I'm going to make another scene component. 40 00:03:01,460 --> 00:03:07,270 So I'm going to say scene like so then I'll give it a key and this key is supposed to at least somewhat 41 00:03:07,270 --> 00:03:10,710 describe the purpose of this scene that we are creating. 42 00:03:10,720 --> 00:03:14,740 Usually I've found that it's good practice to just make it after the component that we're trying to 43 00:03:14,740 --> 00:03:15,550 show. 44 00:03:15,550 --> 00:03:19,970 So in this case I'll give it a key of employee list. 45 00:03:20,390 --> 00:03:25,470 Any time a user navigates to the scene we want to show them the employee list component. 46 00:03:25,630 --> 00:03:31,760 So I'm going to set up a prop of component and I'll pass it the employee list. 47 00:03:31,840 --> 00:03:37,120 So this tells re-act native router flux that whenever someone goes to this scene right here we want 48 00:03:37,120 --> 00:03:39,250 to show this component. 49 00:03:39,250 --> 00:03:43,930 Finally we'll give this thing a title and the title is really anything you want it to be. 50 00:03:43,930 --> 00:03:48,410 It should just be something that makes sense in the context of your application. 51 00:03:48,520 --> 00:03:55,210 So I'm going to give it a title or something like that the employees that works and then one last thing 52 00:03:55,210 --> 00:03:59,520 at the very far end over here don't forget to close off the tag. 53 00:04:00,220 --> 00:04:00,460 All right. 54 00:04:00,460 --> 00:04:04,620 So let's say this will refresh the simulator and see what happens. 55 00:04:04,630 --> 00:04:11,270 So I'm going to refresh and when I do so it looks like we still get the log in screen appearing here. 56 00:04:11,470 --> 00:04:17,890 Well that actually makes a lot of sense right now we designated our log in screen to be the first one 57 00:04:18,040 --> 00:04:19,660 inside this list right here. 58 00:04:19,660 --> 00:04:25,770 So anytime we open up our application we're always going to see this scene component right here. 59 00:04:25,810 --> 00:04:32,170 Now if we want to we can more programmatically tell re-act native router flux which scene we want to 60 00:04:32,170 --> 00:04:37,530 appear first inside of our application and we can do so by adding one additional prop. 61 00:04:37,870 --> 00:04:47,790 So on this second scene I'm going to add in a new prop and I'm going to call it initial initial like 62 00:04:47,790 --> 00:04:48,720 so. 63 00:04:49,320 --> 00:04:54,450 So this initial prop right here will be read by re-act native router flux and the router will say OK 64 00:04:54,480 --> 00:04:58,630 this is going to be the initial scene that we are supposed to show on the screen. 65 00:04:58,740 --> 00:05:04,890 So if we now flip over to the simulator and refresh the page we should see the employee list now appear 66 00:05:05,100 --> 00:05:07,740 rather than the log in form. 67 00:05:08,480 --> 00:05:12,570 Of course we probably always want to start off with a log in form because our expectation is that a 68 00:05:12,570 --> 00:05:16,210 user should really log into our application before we show them any content. 69 00:05:16,380 --> 00:05:22,140 So I'm going to take off the initial prop from the employee list and I'm going to add it to the log 70 00:05:22,140 --> 00:05:27,540 in form instead just to make sure that it's always the one that is going to show up inside of our application 71 00:05:27,540 --> 00:05:28,890 first. 72 00:05:29,160 --> 00:05:30,550 Let's refresh again. 73 00:05:30,840 --> 00:05:34,500 And now we should be back to seeing the log in form appear cool. 74 00:05:34,530 --> 00:05:35,700 So this looks good. 75 00:05:35,700 --> 00:05:40,480 Let's take a break right here and figure out how to navigate between routes in the next video.