WEBVTT

1
00:00:00.320 --> 00:00:01.820
Hi and welcome back.

2
00:00:01.840 --> 00:00:03.540
Today what we're going to be doing is

3
00:00:03.570 --> 00:00:08.420
building this header components here
and placing it on our home screen.

4
00:00:08.450 --> 00:00:14.220
And to do that, what I want to do is first
off start by using our navigation

5
00:00:14.250 --> 00:00:18.820
and to do that we're going to create a new
directory called Navigation

6
00:00:18.850 --> 00:00:25.420
and then inside it we're going to create
a new file called Main Navigation JS.

7
00:00:25.450 --> 00:00:30.140
And here we're going to start off
by creating our navigation system.

8
00:00:30.170 --> 00:00:35.380
I'm going to make this window bigger and
let's start by creating our navigation.

9
00:00:35.410 --> 00:00:43.060
First of all let's import create
Stack Navigator from React Navigation.

10
00:00:43.090 --> 00:00:46.740
And then what we want
to do is create our Stack.

11
00:00:46.770 --> 00:00:52.420
So I'm just going to call it Stack and I'm
going to do create Stack Navigator.

12
00:00:52.450 --> 00:00:53.020
Great.

13
00:00:53.050 --> 00:00:56.820
And now I'm going to create another
constant that is going to be called

14
00:00:56.850 --> 00:01:05.020
constant main navigation and this is
going to return our navigation system.

15
00:01:05.040 --> 00:01:09.200
Great.
So let's do stack navigator.

16
00:01:10.080 --> 00:01:12.210
And inside this we want to place our

17
00:01:12.240 --> 00:01:15.980
initial screen which is going
to be the home screen.

18
00:01:16.010 --> 00:01:21.260
And for the name we are going to be
using the constants as we did last time.

19
00:01:21.280 --> 00:01:23.060
And for the component we're going to be

20
00:01:23.090 --> 00:01:26.780
using our home screen
that we're about to build.

21
00:01:26.810 --> 00:01:31.340
So first of all let's
create our file Routes JS.

22
00:01:31.370 --> 00:01:34.380
Let's create an exportable constants here

23
00:01:34.410 --> 00:01:39.700
called Routes and the first page that we
are about to create is the home page.

24
00:01:39.730 --> 00:01:46.490
So let's save this and let's
import this here Routes home.

25
00:01:46.520 --> 00:01:52.100
Great, let's import and now we need
the home screen and for that what we are

26
00:01:52.130 --> 00:01:56.700
going to need to do is create a new
directory called screens

27
00:01:56.730 --> 00:02:02.900
and here we're going to place a new
directory called home.

28
00:02:02.930 --> 00:02:08.100
And inside this home we're going to create
first of all home JS file that is going

29
00:02:08.130 --> 00:02:12.610
to take care of all the components
that we want to place on the screen.

30
00:02:12.640 --> 00:02:16.260
And we also want to create
the style JS file.

31
00:02:16.290 --> 00:02:19.220
So let's just import style sheet inside

32
00:02:19.250 --> 00:02:25.700
here and create a constant for style
and use the style sheet to create

33
00:02:25.730 --> 00:02:30.260
the style sheet and let's
export default style.

34
00:02:30.290 --> 00:02:36.860
And inside the home we want to import
react from react we want to import the

35
00:02:36.890 --> 00:02:43.170
styles we just created
and we also want to create just a default

36
00:02:43.200 --> 00:02:51.180
view maybe from native
and let's create const home

37
00:02:51.210 --> 00:03:00.540
that is going to return an empty view
and let's export default home.

38
00:03:00.570 --> 00:03:02.100
Let's save this.

39
00:03:02.120 --> 00:03:03.340
Everything's looking good.

40
00:03:03.370 --> 00:03:08.960
And inside here we're just going
to import this home component.

41
00:03:10.760 --> 00:03:16.420
Great, now that we have our navigation,
we want to make an export

42
00:03:16.450 --> 00:03:21.500
of this main navigation here
and then we want to go back to our app

43
00:03:21.530 --> 00:03:27.680
file and inside here we are going
to import the main navigation and let's

44
00:03:27.710 --> 00:03:30.340
delete the safe area
view from here actually.

45
00:03:30.370 --> 00:03:37.820
And let's just return main navigation
so we don't need this here.

46
00:03:37.850 --> 00:03:42.780
And inside the home we can just
wrap this inside Safe Area View.

47
00:03:42.810 --> 00:03:46.260
This way we're going to have
more control over each page.

48
00:03:46.290 --> 00:03:51.380
And let's put this view inside here.

49
00:03:51.410 --> 00:03:53.900
Let's import safe area view.

50
00:03:53.930 --> 00:03:57.540
And inside this view, I just create a text

51
00:03:57.570 --> 00:04:06.020
called Hello World so that we can make
sure that we see the home appear here.

52
00:04:06.050 --> 00:04:09.840
And I'm going to need to import text.

53
00:04:10.600 --> 00:04:13.740
And let's save this.

54
00:04:13.770 --> 00:04:18.940
And now we are having an issue because I
forgot to import navigation container

55
00:04:18.970 --> 00:04:26.860
to put this inside of so let's
import that and close this.

56
00:04:26.890 --> 00:04:29.505
Great and now we see this appear.

57
00:04:29.705 --> 00:04:35.560
Also I don't think that we're going to be going
with the navigation label setup so let's

58
00:04:35.590 --> 00:04:39.420
just get rid of that really quickly here
we're going to need screen options

59
00:04:39.450 --> 00:04:47.260
and we're going to say that our header
should return null and that's it.

60
00:04:47.280 --> 00:04:49.980
If you want you can also use headers shown

61
00:04:50.010 --> 00:04:56.260
false
and then just for the setup purposes we

62
00:04:56.280 --> 00:05:04.780
are also going to create styles here
I want it to be a directory actually so

63
00:05:04.800 --> 00:05:13.340
styles folder and inside here I'm going
to create a file called Global Style JS.

64
00:05:13.360 --> 00:05:18.380
I'm going to import
style sheet from React native

65
00:05:18.410 --> 00:05:26.340
and I'm going to create Const style
or I'm going to call it Global Style.

66
00:05:26.360 --> 00:05:28.020
I'm going to use the style sheets

67
00:05:28.040 --> 00:05:35.120
to create the style sheet
and here we can put our global styles

68
00:05:35.400 --> 00:05:41.300
and this file will serve for us anytime we
want to create a style that could be

69
00:05:41.330 --> 00:05:46.940
applied anywhere and it's not somehow
connected to each screen or a component.

70
00:05:46.970 --> 00:05:51.300
If you want a style that's connected
to a component or a screen let's just

71
00:05:51.330 --> 00:05:56.100
create it inside the directory
for that component or a screen.

72
00:05:56.130 --> 00:05:59.380
So here we have a gray
background right now.

73
00:05:59.410 --> 00:06:03.900
So I'm just going to create
a style called background white.

74
00:06:03.920 --> 00:06:10.060
And I'm going to say background color
instead of white

75
00:06:10.090 --> 00:06:12.540
I'm just going to give
it the color for white

76
00:06:12.570 --> 00:06:14.540
actually, I prefer that.

77
00:06:14.570 --> 00:06:19.380
And on our home page,
we can create a style and we can call

78
00:06:19.410 --> 00:06:27.380
the global style background white
and import the global style here.

79
00:06:27.410 --> 00:06:32.740
And also I didn't really give a lot
of attention to this in the last project.

80
00:06:32.770 --> 00:06:38.700
But I do like and think that advanced
developers should be sorting their

81
00:06:38.730 --> 00:06:45.180
imports and it's a good code formatting
consistency to do so that in the bigger

82
00:06:45.210 --> 00:06:49.340
projects, you're able to find
everything easier for your projects.

83
00:06:49.360 --> 00:06:54.500
And if we want this page to take up the
whole space, we could also use the flex.

84
00:06:54.530 --> 00:07:01.020
So we can just create Flex
style here and say Flex One,

85
00:07:01.040 --> 00:07:08.700
go to our home page and assign it
here as well from Global Style Flex.

86
00:07:08.730 --> 00:07:12.260
Let's save this and now our project home

87
00:07:12.290 --> 00:07:16.340
page is taking up the whole
page which is great.

88
00:07:16.360 --> 00:07:22.420
So this is mainly our setup but we did
learn about scaling functions and how

89
00:07:22.450 --> 00:07:27.340
important they are for us from the last
project so I'm not going to go

90
00:07:27.360 --> 00:07:29.940
into the Nitty gritty details
of setting them up again.

91
00:07:29.970 --> 00:07:34.540
If you're interested in that,
please dive into the appropriate section.

92
00:07:34.570 --> 00:07:36.940
It's going to be listed below this video.

93
00:07:36.970 --> 00:07:42.780
But for now, I'm just going to copy that
scaling file inside our styles folder.

94
00:07:42.800 --> 00:07:46.300
So let's do this and copy it here.

95
00:07:46.330 --> 00:07:49.340
And now I have some error because of this,

96
00:07:49.360 --> 00:07:55.780
because we haven't installed the react
native device info for our project.

97
00:07:55.800 --> 00:08:00.500
So what I'm going to do is go
to the terminal, go to the root of this

98
00:08:00.530 --> 00:08:05.500
project donation app,
and I'm going to install this package,

99
00:08:05.530 --> 00:08:12.040
install react native device info,
and I'm going to save it.

100
00:08:12.520 --> 00:08:15.860
And I just want to make sure
that there are no pods to install.

101
00:08:15.890 --> 00:08:19.640
So I'm going do pod install again.

102
00:08:20.120 --> 00:08:22.140
Actually there is.
So good.

103
00:08:22.170 --> 00:08:23.460
Please do this.

104
00:08:23.480 --> 00:08:25.200
Definitely.

105
00:08:26.880 --> 00:08:32.700
And now we should be able to
use the react native device info.

106
00:08:32.730 --> 00:08:34.700
I just going to resave this.
Okay.

107
00:08:34.730 --> 00:08:38.300
My errors coming from my editor are gone.

108
00:08:38.320 --> 00:08:40.500
I don't need this terminal anymore.

109
00:08:40.530 --> 00:08:41.980
I'm going to reload the app,

110
00:08:42.010 --> 00:08:45.340
and it seems like I'm getting
no issues, which is great.

111
00:08:45.370 --> 00:08:49.340
So I'm thinking that this might
be it for this video as well.

112
00:08:49.370 --> 00:08:54.660
Just because I do not want to be taking
up a bunch of time for every video.

113
00:08:54.690 --> 00:08:58.820
So I promise we're going to get into doing

114
00:08:58.850 --> 00:09:04.100
this component in the next upcoming video,
and I'll meet you there.

115
00:09:04.120 --> 00:09:05.960
Thanks so much for watching.
See you soon.