1
00:00:00,820 --> 00:00:05,700
In the last section we made our first use of the scene component from the re-act native router flux

2
00:00:05,700 --> 00:00:06,900
library.

3
00:00:06,900 --> 00:00:10,050
We did so by making a router component inside of it.

4
00:00:10,050 --> 00:00:11,860
We placed a router tag.

5
00:00:11,880 --> 00:00:16,080
Now this overall router tag is what kind of organizes all the different scenes that we're going to put

6
00:00:16,080 --> 00:00:17,660
together for our application.

7
00:00:17,700 --> 00:00:23,520
Remember each scene corresponds to one distinct screen that we want to show to the user.

8
00:00:23,700 --> 00:00:31,200
Our scene has three properties to it right now a key component and a title as we saw inside the simulator

9
00:00:31,230 --> 00:00:37,760
if we provide a title the routing library will automatically generate a header component for us in place

10
00:00:37,770 --> 00:00:39,860
inside the application.

11
00:00:39,860 --> 00:00:44,960
We can also place the component tag which tells it hey whenever you boot up I want to show this particular

12
00:00:44,960 --> 00:00:45,910
component.

13
00:00:46,250 --> 00:00:51,560
Finally we had passed him the key property and this is going to get a lot more relevant when we want

14
00:00:51,560 --> 00:00:56,030
to navigate between different scenes in our application.

15
00:00:56,030 --> 00:01:00,980
I also had previously mentioned an initial property that initial property is used to figure out what

16
00:01:00,980 --> 00:01:06,380
the first scene to show inside of our app is because we've only got one scene right now we really don't

17
00:01:06,380 --> 00:01:09,890
need to make use of it so we don't need the initial property just yet.

18
00:01:10,980 --> 00:01:16,710
After we finished creating the router we imported it into our component and then placed it inside the

19
00:01:16,710 --> 00:01:17,560
render method.

20
00:01:17,580 --> 00:01:19,320
And so this is where the real magic happens.

21
00:01:19,320 --> 00:01:24,540
You know we place the router somewhere and poof the routing library just fills figures out what needs

22
00:01:24,540 --> 00:01:26,300
to be shown on the screen for us.

23
00:01:28,460 --> 00:01:29,150
All right.

24
00:01:29,270 --> 00:01:31,580
So that brings us up to the present.

25
00:01:31,790 --> 00:01:33,330
The big issue right now.

26
00:01:33,370 --> 00:01:33,690
Yeah.

27
00:01:33,710 --> 00:01:35,720
You know we were able to refresh no errors.

28
00:01:35,720 --> 00:01:40,400
We have a log in form as on the screen we want we have a header but clearly there is something really

29
00:01:40,400 --> 00:01:41,830
funky going on right here.

30
00:01:41,840 --> 00:01:46,670
We've got this kind of overlay of the header on top of our component.

31
00:01:46,820 --> 00:01:49,580
So clearly this doesn't really work for us.

32
00:01:49,580 --> 00:01:54,880
You might wonder why the router library authors decided to make their nav bar behave like this.

33
00:01:54,890 --> 00:01:58,090
You know kind of floating on top of any content behind it.

34
00:01:58,580 --> 00:02:03,140
Well to be honest you know they don't know if you want to use their nav bar as is or if you want to

35
00:02:03,140 --> 00:02:06,800
customize it to behave like a bottom tab bar down here.

36
00:02:06,980 --> 00:02:13,790
So it is up to us to fully customize this menu bar this nav bar appear as much as we want so we can

37
00:02:14,120 --> 00:02:17,880
really tear the thing apart turn it into absolutely anything we want.

38
00:02:17,930 --> 00:02:23,060
So by default the library authors are giving us something that can be heavily customized and so they're

39
00:02:23,060 --> 00:02:25,910
really making no assumptions about it whatsoever.

40
00:02:25,910 --> 00:02:29,290
You know maybe you do want to overlay some content maybe you don't.

41
00:02:29,300 --> 00:02:29,810
I don't know.

42
00:02:29,840 --> 00:02:33,820
You know it's really up to us to figure out what we want to do for us.

43
00:02:33,830 --> 00:02:35,650
Obviously we don't want the overlay here.

44
00:02:35,780 --> 00:02:41,060
So we're going to add a little bit of styling in to fix this issue right here.

45
00:02:41,060 --> 00:02:48,790
We can make some global styling changes by passing a property called Scene style to the router.

46
00:02:49,100 --> 00:02:55,760
So we're going to pass this thing a scene style if we pass this a scene style any style we passed and

47
00:02:55,760 --> 00:03:00,710
here will be applied to all the different scenes on our application when they show up on the screen.

48
00:03:00,920 --> 00:03:05,820
So this is like kind of a you think of this as a global style object right here.

49
00:03:05,900 --> 00:03:13,460
I mean to give it a padding top it's going to hard code in 65 to move it down 65 units.

50
00:03:13,470 --> 00:03:17,550
Now if I refresh it shows up much more reasonably.

51
00:03:17,590 --> 00:03:22,530
So now you can imagine that the kind of the start of this of any component we place in here is you're

52
00:03:22,560 --> 00:03:29,480
right about here because we've got this global 65 patting on top all across our application.

53
00:03:29,890 --> 00:03:32,970
Just for the sake of making sure that everything works well on Android as well.

54
00:03:32,980 --> 00:03:38,350
You know any time we hard code in a style having to do with dimensions we really need to think about

55
00:03:38,410 --> 00:03:40,270
cross-platform compatibility.

56
00:03:40,300 --> 00:03:44,140
So I did also start up my android emulator.

57
00:03:44,170 --> 00:03:47,770
It is let's do a refresh and.

58
00:03:47,780 --> 00:03:48,150
OK.

59
00:03:48,170 --> 00:03:49,420
Definitely looks reasonable.

60
00:03:49,510 --> 00:03:52,270
You'll see it there's definitely a little bit more of a gap here.

61
00:03:52,290 --> 00:03:57,280
We could definitely add in a platform specific check and telling saying like you know hey if we're on

62
00:03:57,310 --> 00:04:00,070
Android maybe only do 60 units or something like that.

63
00:04:00,090 --> 00:04:04,090
But for the purposes of this tutorial I think that you know this looks good.

64
00:04:04,090 --> 00:04:06,640
I'm way more concerned about navigation.

65
00:04:06,820 --> 00:04:10,370
So let's continue with figuring out how navigation works.

66
00:04:11,530 --> 00:04:16,190
All right so at this point in time we've only got a single component to work with the log in form.

67
00:04:16,240 --> 00:04:22,330
So we've got now obviously with navigation we want to figure out how to kind of navigate to different

68
00:04:22,330 --> 00:04:23,500
components of course.

69
00:04:23,500 --> 00:04:26,060
Right we want to navigate to different screens.

70
00:04:26,140 --> 00:04:31,510
So I think that our next step is going to be to create a test component just so we can figure how to

71
00:04:31,510 --> 00:04:34,250
navigate around to different scenes or application.

72
00:04:34,250 --> 00:04:36,440
So let's take a quick break and then come back.

73
00:04:36,440 --> 00:04:41,270
Make a test component and then figure out how we navigate between different scenes in our application