1
00:00:02,350 --> 00:00:09,690
So with that, let's get started with our application here and there are various ways of getting started

2
00:00:09,700 --> 00:00:10,520
of course,

3
00:00:10,690 --> 00:00:19,420
I want to get started by first of all dropping this container style here in my starting screen and instead,

4
00:00:19,960 --> 00:00:25,060
I want to get rid of the text and everything here and I want to start by adding my own header,

5
00:00:25,060 --> 00:00:27,790
so this bar at the top of the screen.

6
00:00:28,150 --> 00:00:34,360
Now we can build such a bar on our own here, let me get rid of that import which we don't need

7
00:00:34,360 --> 00:00:39,880
and I will build it not inside of this app component but in a separate component file, in a separate

8
00:00:39,880 --> 00:00:46,630
custom component because and that's already one super important thing to take away, just like in React for

9
00:00:46,630 --> 00:00:47,630
web apps,

10
00:00:47,680 --> 00:00:55,360
it is a good practice to split your app into multiple components which you then compose together because

11
00:00:55,360 --> 00:00:59,540
that leads to more manageable and reusable code.

12
00:00:59,540 --> 00:01:04,660
So I'll add a new folder, components, the name is up to you though, you can name that folder whatever you want

13
00:01:04,910 --> 00:01:09,360
and in there I want to have a header.js file to hold the header component.

14
00:01:09,490 --> 00:01:14,490
There, we need to import React from React so that we can use React in there and write

15
00:01:14,500 --> 00:01:23,300
jsx code and then we'll also need some components from React Native because you must never forget

16
00:01:23,300 --> 00:01:27,650
that these are the only core components you can use in the end.

17
00:01:27,650 --> 00:01:31,310
You can't use any web HTML elements or anything like that,

18
00:01:31,310 --> 00:01:34,720
you need these core primitives React Native gives you.

19
00:01:34,850 --> 00:01:40,290
So we'll definitely need a view in here and also a text component and also a stylesheet component

20
00:01:40,520 --> 00:01:43,420
and now with that, we can get started building our header.

21
00:01:43,550 --> 00:01:51,890
So for this, I'll add a header constant which holds my functional component because I'll work with functional

22
00:01:51,890 --> 00:01:58,560
components only in this course, we'll use hooks in places where we need to manage state or side effects

23
00:01:58,620 --> 00:02:06,170
and here, we will of course export this component in the end and also set up a styles object with style

24
00:02:06,170 --> 00:02:10,460
sheet create so that we can style this in the end.

25
00:02:10,520 --> 00:02:13,020
Now let's create our component here,

26
00:02:13,040 --> 00:02:14,580
let's return something here

27
00:02:14,750 --> 00:02:19,120
and what I want to return is in the end a view with the text inside of it and the text should be

28
00:02:19,120 --> 00:02:20,190
our title.

29
00:02:20,300 --> 00:02:26,780
So therefore between the opening and closing tag here, I will output props title so that our own

30
00:02:26,780 --> 00:02:34,010
component can receive the title prop and output this here. And the view surrounding the text will be

31
00:02:34,010 --> 00:02:40,790
used for positioning the text and for giving this some styling, so for styling our header because text

32
00:02:40,880 --> 00:02:47,960
elements on their own are also styleable but not to the same extent like views are, views really

33
00:02:47,960 --> 00:02:53,090
are a bit more flexible regarding the styles you can assign and regarding how they behave and therefore,

34
00:02:53,120 --> 00:02:59,600
you always want to use a view for such a surrounding container and for this overall styling your component

35
00:02:59,600 --> 00:03:02,380
might have or parts of your component might have.

36
00:03:02,390 --> 00:03:08,810
So here, I'll add the style prop and assign a style for my styles object, a style we haven't created there

37
00:03:08,810 --> 00:03:16,810
yet but I'll name it header and I'll also give the text a style prop though and point at styles header

38
00:03:16,820 --> 00:03:21,500
title or whatever you want to name it because as I said, you can style text too and here I want to

39
00:03:21,500 --> 00:03:28,360
have some text specific styles later to also make sure that the text looks good. So now here in the

40
00:03:28,450 --> 00:03:35,170
stylesheet, we can start styling our header and I'll start with the header itself, by adding a header

41
00:03:35,170 --> 00:03:40,810
prop and then this object will hold these style definitions for the header, so for this view component

42
00:03:40,810 --> 00:03:46,960
here and there of course, you are free to experiment with whatever you want. I'll go with a width of 100%

43
00:03:47,080 --> 00:03:53,470
so that it takes the full device width we can get or the full width of the parent component

44
00:03:53,470 --> 00:03:58,810
to be precise but I'll add it such that the parent component takes the full device width and therefore,

45
00:03:58,840 --> 00:04:05,040
this will also take the full device width in the end. Assign a height and there, you can experiment with different

46
00:04:05,040 --> 00:04:10,020
values, I found 90 to look quite decent and therefore I'll go with that.

47
00:04:10,020 --> 00:04:16,500
Side note, for now I will optimize for these screens which I have here, in the next course module, we'll

48
00:04:16,500 --> 00:04:23,610
dive into how you can adjust your views and your code for different devices, both regarding

49
00:04:23,610 --> 00:04:30,690
their size as well as regarding the platform your code is running on. For now, we'll not have any differentiation

50
00:04:30,690 --> 00:04:37,640
there, we'll adjust too in our app to look good on these two emulators but again, I'll pick up on this later.

51
00:04:37,830 --> 00:04:45,900
So height of 90, a padding to top of 36 to have some spacing to the top and I need to

52
00:04:45,900 --> 00:04:53,130
add this to basically cope or things like the status bar here or this notch here, so therefore I add

53
00:04:53,160 --> 00:05:00,200
this padding top and I also want to add a background color here

54
00:05:00,360 --> 00:05:04,760
and now you are of course totally free to pick any color you want,

55
00:05:04,770 --> 00:05:13,350
I prepared a nice color, a hex code of a color which I personally like and that is #f7287b

56
00:05:13,380 --> 00:05:21,450
which is quite a nice color in my opinion as you will see in a second.

57
00:05:21,460 --> 00:05:27,250
Now I also want to center the title and therefore, I'll use align items and justifyContent because

58
00:05:27,340 --> 00:05:33,280
every view by default uses flexbox and therefore with align items and justifyContent, we can control

59
00:05:33,280 --> 00:05:39,610
how the child elements of the view are positioned inside of the view and with center for align items

60
00:05:39,640 --> 00:05:40,780
and justifyContent

61
00:05:40,780 --> 00:05:48,010
also set to center, we center all children or child element inside of the view in the center, both

62
00:05:48,010 --> 00:05:50,680
horizontally and vertically.

63
00:05:50,680 --> 00:05:52,480
Now for the header title,

64
00:05:52,480 --> 00:05:55,640
I also want to set up some styles for this.

65
00:05:55,780 --> 00:06:05,230
So the header title here, that should get a color of black because that will fit this color here and

66
00:06:05,260 --> 00:06:11,020
so that we can read the text and I want to set the font size to 18

67
00:06:11,050 --> 00:06:18,500
let's say, so that we have this fixed, a bit bigger font size here. With that,

68
00:06:18,620 --> 00:06:26,550
let's try using this header and let's use it in the app.js file here. There,

69
00:06:26,560 --> 00:06:31,070
we have this view and this view has no style attached.

70
00:06:31,150 --> 00:06:38,050
I will change this and set up a screen view here and give this a flex of one attribute.

71
00:06:38,050 --> 00:06:44,090
Now we can assign this here and flex one will ensure that this view takes all the space it can get

72
00:06:44,140 --> 00:06:49,780
and since it's the root view of our application, that means it will take all the width and height it

73
00:06:49,780 --> 00:06:56,770
can get, it will occupy the full screen and therefore since my header takes width 100%, since

74
00:06:56,770 --> 00:07:03,730
I'll add it directly inside of this view which is now configured to take the full width and height, this

75
00:07:03,730 --> 00:07:06,360
header will also take the full width.

76
00:07:06,370 --> 00:07:08,440
So now we just need to add the header here of course,

77
00:07:08,440 --> 00:07:12,480
so import header from ./components/header,

78
00:07:12,580 --> 00:07:20,020
you can omit the file extension and then simply add header as a self closing tag here but don't forget

79
00:07:20,020 --> 00:07:25,120
to set a title prop because remember that we're outputting the title prop here between the text tags,

80
00:07:25,570 --> 00:07:33,120
so we can add a title here and I'll name it guess a number because that's what our game is about.

81
00:07:33,120 --> 00:07:39,210
Now if we save this, it should automatically rebuild and you should see a header that looks like this

82
00:07:39,240 --> 00:07:45,900
on the iPhone and like this here on Android and I'd say that's okay for both devices. Again, we'll later

83
00:07:46,290 --> 00:07:52,320
explore ways of how you can fine tune the look to the specific device your app is running on.