1
00:00:00,870 --> 00:00:04,740
We just created our first component and now we need to tell React Native that we want this component

2
00:00:04,740 --> 00:00:09,810
to show up on the screen of our device until we do so we're going to continue to see the default content

3
00:00:10,110 --> 00:00:12,500
of the home screen which is right here.

4
00:00:13,680 --> 00:00:14,010
All right.

5
00:00:14,040 --> 00:00:16,940
So to tell React Native that we want to show this component on the screen.

6
00:00:17,040 --> 00:00:22,690
I'm going to go back to the apt James file that's inside of my root of my project directory.

7
00:00:22,750 --> 00:00:27,160
So here's the update J.S. file right here inside of here you're going to see a little bit of existing

8
00:00:27,160 --> 00:00:32,110
code this code right here is some code that I added into our starter project.

9
00:00:32,140 --> 00:00:35,010
Remember I mentioned that I added in just a little bit of code.

10
00:00:35,050 --> 00:00:36,520
This is pretty much it right here.

11
00:00:36,520 --> 00:00:39,050
So you'll notice there's not a whole lot going on.

12
00:00:39,190 --> 00:00:43,120
We'll talk about the great details of what's going on side of your over time.

13
00:00:43,120 --> 00:00:48,210
But once again right now let's just try to get our new component to show up so to do so I'm going to

14
00:00:48,210 --> 00:00:53,550
first import the component we just created underneath the second import statement that is already inside

15
00:00:53,550 --> 00:01:00,720
of here right here and going to say import component screen from.

16
00:01:01,020 --> 00:01:06,420
And then I'll list out a relative path to that file we've just created so by relative path I mean that

17
00:01:06,420 --> 00:01:10,800
we need to essentially describe the path from our root project directory which is where the app dot

18
00:01:10,870 --> 00:01:14,300
J.S. file is to the component screen file.

19
00:01:14,490 --> 00:01:18,810
So I'll first put in dot slash which means look in the current working directory.

20
00:01:18,840 --> 00:01:26,370
So look in the root project directory then go into the OR folder so write out dot s RC then go into

21
00:01:26,370 --> 00:01:31,820
the screens folder and then finally find the component screen file inside there.

22
00:01:31,820 --> 00:01:38,260
So components screen like so when we write out these import statements we are not required to put on

23
00:01:38,260 --> 00:01:41,530
the path we're seeing in the extension of the file at the end of the path.

24
00:01:41,770 --> 00:01:45,990
So we do not have to put on dot j ust like that okay.

25
00:01:46,020 --> 00:01:50,850
So now component screen right here is a direct reference to the function back over here that we just

26
00:01:50,850 --> 00:01:52,500
created.

27
00:01:52,650 --> 00:01:54,830
It's now to make that component show up on the screen.

28
00:01:54,940 --> 00:01:56,520
We're going to add it to this stack.

29
00:01:56,520 --> 00:02:02,320
Navigator thing the stack Navigator is a little object that decides what content we're going to show

30
00:02:02,320 --> 00:02:07,810
on the screen at any given point in time so we want to add in the component that we just created as

31
00:02:07,810 --> 00:02:10,290
an additional option for this stack.

32
00:02:10,300 --> 00:02:11,720
Navigator to show.

33
00:02:12,100 --> 00:02:16,960
So to do so I'm going to find this first object right here and right after home screen I'll put in a

34
00:02:16,960 --> 00:02:27,260
comma I'll then say components like so and components screen so we've now added in our new component

35
00:02:27,470 --> 00:02:33,280
as a possible option for our stack navigator to show to the user in the second object right here.

36
00:02:33,300 --> 00:02:36,960
You'll notice that there's an option called initial root name.

37
00:02:36,960 --> 00:02:42,420
That's a description or a configuration option that tells this navigator thing what the first component

38
00:02:42,450 --> 00:02:44,370
is that should be displayed.

39
00:02:44,400 --> 00:02:50,160
Right now it's set to home which means that the stack navigator is going to find the home option right

40
00:02:50,160 --> 00:02:53,630
here and show that component on the screen first.

41
00:02:53,700 --> 00:02:58,560
So we're going to update that initial about name and tell it that we instead want to show this components

42
00:02:58,560 --> 00:02:59,560
option.

43
00:02:59,700 --> 00:03:06,600
So I will change home to capital C components make sure that components right here has the exact same

44
00:03:06,600 --> 00:03:08,690
spelling as components right there.

45
00:03:08,940 --> 00:03:13,050
If it's not the exact same you're going to end up seeing an error message.

46
00:03:13,050 --> 00:03:13,290
Okay.

47
00:03:13,290 --> 00:03:19,740
So I'll save this file and when I flip back over to my device I'll see the component we just put together

48
00:03:20,040 --> 00:03:20,990
on the screen.

49
00:03:21,120 --> 00:03:21,980
So I see the text.

50
00:03:22,020 --> 00:03:27,540
This is the component screen and I see that both on Android and my IOW device as well.

51
00:03:27,840 --> 00:03:32,550
You'll also notice that this text is kind of large and that's because back inside of our component screen

52
00:03:32,550 --> 00:03:35,800
component remember we added in that font size of 30.

53
00:03:35,970 --> 00:03:40,650
If we start to change that font size like let's say go to 50 or so you're going to see that text appear

54
00:03:40,650 --> 00:03:45,910
much larger or if we go all the way down to 10 it's gonna be far smaller.

55
00:03:46,020 --> 00:03:48,400
I'm going to leave it at thirty for now.

56
00:03:48,560 --> 00:03:48,780
OK.

57
00:03:48,800 --> 00:03:52,970
So we've now gone through the process of creating an entire rack component and then wiring it up to

58
00:03:52,970 --> 00:03:56,630
this stack navigator thing inside of our app dot J.S. file.

59
00:03:56,830 --> 00:03:58,820
It's now we can see some content on the screen.

60
00:03:58,820 --> 00:03:59,730
Let's take a quick pause.

61
00:03:59,730 --> 00:04:00,390
We're going to come back.

62
00:04:00,440 --> 00:04:04,910
We're going to do a quick little summary to kind of fill in a couple blanks about all the code that

63
00:04:04,910 --> 00:04:05,670
we just wrote.

64
00:04:06,050 --> 00:04:07,280
So I'll see you in just a minute.