1
00:00:00,820 --> 00:00:04,660
We've now assembled all of our different screens together but like we just saw we can only see these

2
00:00:04,660 --> 00:00:06,250
sign up screen for right now.

3
00:00:06,250 --> 00:00:10,030
So we're going to flip around to some of our different files so we currently have.

4
00:00:10,030 --> 00:00:14,110
We're going to add in a couple of buttons to each one and make sure that we can kind of navigate around

5
00:00:14,110 --> 00:00:17,290
this flow and see some of the appropriate interactions occur.

6
00:00:17,980 --> 00:00:19,110
So let's get to it.

7
00:00:19,120 --> 00:00:21,480
Well first start off on our sign up screen.

8
00:00:21,480 --> 00:00:25,730
It's going to open up my sign up screen inside of here from HREOC native.

9
00:00:25,740 --> 00:00:31,800
I'm going to import my button element then I'm going to receive on my props object right here.

10
00:00:31,800 --> 00:00:41,650
Remember we get that navigation from I'm then going to display a react fragment which remember means

11
00:00:41,650 --> 00:00:45,670
we can return multiple elements from this component but it's not going to cause something to actually

12
00:00:45,670 --> 00:00:47,740
be displayed on the screen.

13
00:00:47,940 --> 00:00:56,930
Then right underneath that I'm going to show a button with a title of go to sign in and whenever a user

14
00:00:56,930 --> 00:01:04,730
presses this thing I'm going to make sure that I call navigation dot navigate and then remember even

15
00:01:04,730 --> 00:01:09,230
though we've got all this crazy nested stuff going on in order to go to a different screen we're still

16
00:01:09,230 --> 00:01:14,360
going to just print out the key of the screen we want to go through to even if it is one these deeply

17
00:01:14,360 --> 00:01:15,810
nested ones down here.

18
00:01:15,890 --> 00:01:19,040
So in our case for the button we're putting together we want to go to the sign and screen.

19
00:01:19,040 --> 00:01:25,490
So we're gonna navigate to simply sign in so back over here navigation not navigate and I'll go to sign

20
00:01:25,820 --> 00:01:26,090
in

21
00:01:29,390 --> 00:01:32,100
it's now I'll save this thing and we'll do a quick test.

22
00:01:32,280 --> 00:01:35,690
There's my button I'll tap on it and I go over to the sign and screen.

23
00:01:35,890 --> 00:01:38,830
Now I can very easily go back and forth between these two.

24
00:01:38,960 --> 00:01:43,760
Now of course in our original mockups we don't have any header at the top of the sign up screen.

25
00:01:43,770 --> 00:01:48,450
Instead the navigation between these is going to occur through that those kind of like blue links down

26
00:01:48,450 --> 00:01:49,230
here.

27
00:01:49,290 --> 00:01:53,910
So eventually we're gonna have to hide the header at the top and implement some really solid blue links

28
00:01:55,480 --> 00:01:59,470
if you're on AOS you might think that we've kind of already got that in the form of the button but if

29
00:01:59,470 --> 00:02:04,270
you were actually running this on Android remember on Android whenever we show a button element it shows

30
00:02:04,270 --> 00:02:09,490
a big blue button through events eventually can have to come back and fix us up a little bit okay.

31
00:02:09,500 --> 00:02:13,460
So we now have our intended navigation between sign up and sign in.

32
00:02:13,460 --> 00:02:17,870
So now we're going to put together another button inside of here that's gonna kick us over to our main

33
00:02:17,870 --> 00:02:18,880
flow.

34
00:02:18,880 --> 00:02:24,800
So going to copy that button right there I'm going to paste it down here and I'm going to say go to

35
00:02:24,920 --> 00:02:32,040
main flow then whenever user taps this we're going to try to navigate to our main flow remember our

36
00:02:32,040 --> 00:02:38,980
main flow is essentially this whole block right here so when we go to our main flow we should see a

37
00:02:38,980 --> 00:02:46,140
bottom tab navigator and we should first see our track list so I'm going to save this really quickly

38
00:02:47,520 --> 00:02:50,290
I'll then tap on go to main flow in as soon as I tap that.

39
00:02:50,300 --> 00:02:53,460
Notice how that navigation was 100 percent instant.

40
00:02:53,510 --> 00:02:56,280
So that's the switch navigator in inaction.

41
00:02:56,330 --> 00:03:01,100
Remember going between our off flow in our main flow we really want to be instantaneous and just like

42
00:03:01,130 --> 00:03:01,910
okay you're logged in.

43
00:03:01,910 --> 00:03:02,450
Boom.

44
00:03:02,540 --> 00:03:04,710
Here you go here's your trackless screen.

45
00:03:04,710 --> 00:03:09,250
So looks like that definitely the appropriate fact once we're here at the trackless screen.

46
00:03:09,260 --> 00:03:11,940
Notice how we now have the bottom tab bar.

47
00:03:12,080 --> 00:03:13,540
I know it looks a little empty right now.

48
00:03:13,550 --> 00:03:17,740
That's just because we have not yet assigned any icons for any of these different elements.

49
00:03:18,020 --> 00:03:20,870
But now we can tap between each of these different things.

50
00:03:20,870 --> 00:03:23,030
And it's going to show us the appropriate screen.

51
00:03:23,030 --> 00:03:24,980
Of course some of our content is going off.

52
00:03:24,980 --> 00:03:29,780
That's why we increase the font size just to make sure we can see that text very easily so we can see

53
00:03:29,780 --> 00:03:37,420
our track list flow our track create screen and our account screen as well.

54
00:03:37,420 --> 00:03:41,330
So once again that is our bottom tab bar inaction.

55
00:03:41,390 --> 00:03:46,940
Now to finish this all off the last thing we have to kind of wire up or have some kind of instrumentation

56
00:03:46,940 --> 00:03:51,680
in place I suppose is to make sure that we can go from our track list screen over to the track detail

57
00:03:51,950 --> 00:03:54,030
and then back to track list.

58
00:03:54,200 --> 00:03:59,050
So to do so we can open up our track list screen inside of here we'll do the same thing we just did

59
00:03:59,060 --> 00:04:00,650
inside of our sign up screen.

60
00:04:00,650 --> 00:04:08,260
So I got to make sure that I get my button import from React Native I'll then put it in a fragment making

61
00:04:08,260 --> 00:04:10,870
sure that I clean up the semicolon at the end of the text line.

62
00:04:12,280 --> 00:04:18,230
I'll then show my button and give it a title of go to track detail

63
00:04:21,310 --> 00:04:27,880
I'll make sure I receive that navigation prop and I'll add in my on press callback so whenever I press

64
00:04:27,880 --> 00:04:34,360
that we'll do a navigation dot navigate and remember in this case we want to go over to our track detail

65
00:04:35,070 --> 00:04:42,230
so put in a string here of track detail gets let's save this and we'll do one last test.

66
00:04:43,010 --> 00:04:45,260
So once again we can go to our main flow.

67
00:04:45,260 --> 00:04:50,150
We can then go to our track detail and we're back to that classic header interaction where we're going

68
00:04:50,150 --> 00:04:51,960
back and forth back and forth.

69
00:04:52,040 --> 00:04:56,690
So eventually we're going to have our big list of tracks right here that a user can tap on and go to

70
00:04:56,690 --> 00:05:00,970
the detail and once they see the detail they'll then go back to the the screen.

71
00:05:01,040 --> 00:05:02,310
So that's pretty much it.

72
00:05:02,420 --> 00:05:08,620
That's the essentially entire navigation flow of our whole application we put together quite quite easily.

73
00:05:08,690 --> 00:05:11,810
Now of course we're not going to do all this navigation with just button elements.

74
00:05:11,810 --> 00:05:15,890
We're going to eventually have to have some really clever navigation where we detect that the user has

75
00:05:15,890 --> 00:05:22,040
say successfully now logged in where authenticated and once they have authenticated that's when we're

76
00:05:22,040 --> 00:05:27,270
going to want to actually go over to our main flow from the log and flow but I think that you can kind

77
00:05:27,270 --> 00:05:29,970
of see what the overall feel is of our application now.

78
00:05:29,970 --> 00:05:32,970
So once again if I refresh I can go to sign in.

79
00:05:32,970 --> 00:05:34,020
Go back.

80
00:05:34,020 --> 00:05:39,180
I can go to my main flow I can go between these different screens linked at the bottom.

81
00:05:39,200 --> 00:05:44,870
And if I want to go to was very specific track and see it on the screen I can go to track detail.

82
00:05:44,870 --> 00:05:47,180
So like I said that's pretty much it.

83
00:05:47,480 --> 00:05:52,430
If you ever have to design an application from scratch as we just did I really recommend just throwing

84
00:05:52,430 --> 00:05:55,340
together a big pile of navigators as we just did.

85
00:05:55,520 --> 00:05:58,940
Because you're going to see that as we start to fill in some implementation here for all these different

86
00:05:58,940 --> 00:05:59,580
screens.

87
00:05:59,720 --> 00:06:03,890
The implementation is actually gonna be rather easy because all we have to really do now is think about

88
00:06:04,190 --> 00:06:07,200
OK what data does each my different screens need.

89
00:06:07,340 --> 00:06:12,470
And we're going to essentially wire up each screen in isolation and then put in a little bit navigation

90
00:06:12,470 --> 00:06:13,030
between each.

91
00:06:13,040 --> 00:06:17,660
But at the end of the day we're kind of just working on six separate screens and that's pretty much

92
00:06:17,660 --> 00:06:18,680
it.

93
00:06:18,680 --> 00:06:20,550
So this is definitely great progress.

94
00:06:20,550 --> 00:06:21,610
So let's take a pause right here.

95
00:06:21,620 --> 00:06:26,540
Come back the next video and start wiring up access to our API for our application.