1
00:00:02,460 --> 00:00:06,390
Obviously, this screen right now isn't that useful and therefore

2
00:00:06,390 --> 00:00:13,500
I'll now go to that text which I used as a dummy and replace it with let's say start a new game, something

3
00:00:13,500 --> 00:00:21,480
like that and below this, I want to have an input area with a slight drop shadow, so this typical card

4
00:00:21,540 --> 00:00:27,420
look you might know from some apps and websites where you have a box with a slight drop shadow behind

5
00:00:27,420 --> 00:00:29,220
it, maybe some rounded corners.

6
00:00:29,400 --> 00:00:36,570
I want to recreate that here, so I'll add a view here, a view because again that is a very flexible element,

7
00:00:36,600 --> 00:00:42,120
we can apply a lot of styles there, we can add our shadow and our rounded corners there and then hold

8
00:00:42,150 --> 00:00:43,460
our content in that view,

9
00:00:43,470 --> 00:00:49,080
so that's great for having a general styling of the container and now inside of that view, I want to

10
00:00:49,080 --> 00:00:56,910
have a text where we say select a number for example and where we then also want to have a text field

11
00:00:57,150 --> 00:00:58,580
where users can enter something.

12
00:00:58,590 --> 00:00:59,310
So there,

13
00:00:59,430 --> 00:01:06,300
I'll add a text input component which is that built-in component where users can use the keyboard to

14
00:01:06,300 --> 00:01:11,970
to enter a value and here, they should enter a number. We'll configure this and style this in a second, for

15
00:01:11,970 --> 00:01:17,820
now I'll just drop it in like that and below that, I want to have two buttons sit next to each other

16
00:01:17,850 --> 00:01:18,810
and that's important,

17
00:01:18,810 --> 00:01:25,190
next to each other, not below each other which allow us to reset the input and choose a new one or confirm

18
00:01:25,190 --> 00:01:32,510
the chosen one. So we need a view here because that allows us to position items next to each other

19
00:01:32,660 --> 00:01:37,520
whereas these items are positioned above each other then because if I would just add two buttons here,

20
00:01:37,560 --> 00:01:42,650
then I would have to change this views flex direction to have them next to each other but then the text

21
00:01:42,680 --> 00:01:45,420
and text input would also be sitting next to each other.

22
00:01:45,500 --> 00:01:51,950
So now I'll add a view here so that in this view, the surrounding view, this, this and this view component

23
00:01:52,250 --> 00:01:54,010
are sitting above each other,

24
00:01:54,020 --> 00:02:00,590
so on the vertical axis but inside of this view, I can now also make sure that the items in there then

25
00:02:00,590 --> 00:02:05,270
sit next to each other, so in the horizontal axis and that's what I want here.

26
00:02:05,450 --> 00:02:11,480
So I'll import the built-in button which is one of the view components that automatically adjusts itself

27
00:02:11,510 --> 00:02:17,540
to the underlying platform, later in a separate module, you will learn how you manually can find out

28
00:02:17,630 --> 00:02:21,990
on which platform you're running to adjust the look and feel of your app to that.

29
00:02:22,220 --> 00:02:29,450
Here, we'll go with the built-in button and give the first one a title of reset and the second one,

30
00:02:29,510 --> 00:02:32,450
the second button here a title of confirm

31
00:02:32,450 --> 00:02:39,740
and then here, onPress will at the moment do nothing, so that's just an empty function, just adding it

32
00:02:39,740 --> 00:02:42,000
so that we have the prop already there,

33
00:02:42,050 --> 00:02:43,710
we'll add logic later and

34
00:02:43,850 --> 00:02:46,140
for now, we'll just have the buttons here.

35
00:02:46,250 --> 00:02:51,330
Now the styling will be missing though, as I said, the button should be sitting next to each other.

36
00:02:51,410 --> 00:02:57,170
Hence I'll give this view here which holds the buttons a style pointing at the styles object and there,

37
00:02:57,170 --> 00:02:59,060
let's say a button container,

38
00:02:59,060 --> 00:03:02,370
this name as always is totally up to you

39
00:03:02,520 --> 00:03:10,930
and I also want to give this view which holds my inputs a style here, referring to the styles object

40
00:03:10,960 --> 00:03:14,930
and I'll use the let's say input container, this name of course is also up to you

41
00:03:15,040 --> 00:03:20,850
and this here, I want to style this like a special title, maybe with a bigger font size,

42
00:03:20,950 --> 00:03:27,090
so here, I'll assign a style of title let's say.

43
00:03:27,300 --> 00:03:36,900
Now we can go down there in our stylesheet and add the title, add the input container and also add the

44
00:03:37,080 --> 00:03:43,330
button container and now we can start adding some styles there. Now for the title,

45
00:03:43,330 --> 00:03:47,330
again I want to set the font size, so I'll set font size like this,

46
00:03:47,410 --> 00:03:58,750
set it to let's say 20 and maybe also add some spacing on the vertical axis with margin vertical of let's

47
00:03:58,750 --> 00:04:09,750
say 10, 10 like this and always keep in mind, margin vertical basically replaces margin bottom and margin

48
00:04:09,990 --> 00:04:17,050
top and now onto the button container and I'll come back to the input container in a second,

49
00:04:17,060 --> 00:04:19,780
the button container will get a flex direction

50
00:04:19,790 --> 00:04:23,790
of row, the default is column but now I want to have items sit next to each other,

51
00:04:23,790 --> 00:04:25,870
so we need to use row here.

52
00:04:25,870 --> 00:04:31,420
I want to set a width here because if we don't set a width on the button container, it would just be

53
00:04:31,450 --> 00:04:34,960
as wide as the two buttons are together,

54
00:04:34,960 --> 00:04:41,050
instead I want to use the width of the parent, so of this view here and then position the buttons inside

55
00:04:41,050 --> 00:04:41,880
of this view,

56
00:04:41,890 --> 00:04:47,140
so I want to do the opposite, not style the view according to the buttons but position the buttons according

57
00:04:47,140 --> 00:04:47,970
to the view.

58
00:04:48,160 --> 00:04:55,150
So I'll give the button container this view and explicit width here and now to position the buttons in

59
00:04:55,150 --> 00:04:55,590
there,

60
00:04:55,690 --> 00:05:01,630
we can use justifyContent to position them along the main axis which for flex direction row is left

61
00:05:01,630 --> 00:05:07,930
to right and there I'll choose space between so that the buttons sit on the left and right edge of this

62
00:05:07,930 --> 00:05:15,000
row and distribute all the available free space between them. Also add a little bit of padding horizontal

63
00:05:15,000 --> 00:05:21,660
here though so that we have some spacing to the left and right inside of our view, maybe 15 so that

64
00:05:21,660 --> 00:05:24,920
the buttons don't actually sit directly on the edges on the left and right

65
00:05:25,020 --> 00:05:29,420
but there is some spacing out on the left and right. Okay,

66
00:05:29,560 --> 00:05:35,240
so with that if we save this, we see that

67
00:05:35,660 --> 00:05:39,860
which I don't know about you but which doesn't look that great, does it?

68
00:05:39,860 --> 00:05:45,650
Now the problem is that the input container has no styles yet. The input container holds all the inputs

69
00:05:45,650 --> 00:05:48,340
though which is why the stylings there look a bit off.

70
00:05:49,040 --> 00:05:56,000
So we should give the input container some styling and there, I want to add a width and you can now use

71
00:05:56,090 --> 00:06:02,690
a hardcoded width of let's say 300 pixels or use a width and percentage.

72
00:06:02,990 --> 00:06:11,570
Now I'll add a width here of 300 but also add a max width of 80% so that we have 300 pixels

73
00:06:11,570 --> 00:06:11,860
width

74
00:06:11,870 --> 00:06:17,120
but if the device would be too small, so that's a little bit of responsiveness which I add here already,

75
00:06:17,120 --> 00:06:23,300
if the device would be too small, we make sure that our width doesn't exceed 80%. And then I want

76
00:06:23,300 --> 00:06:25,840
to align the items in the center,

77
00:06:25,850 --> 00:06:29,600
keep in mind the input container is a view, therefore it uses flexbox,

78
00:06:29,600 --> 00:06:35,420
it uses the default of flex direction column and therefore with align item center, we position items

79
00:06:35,630 --> 00:06:39,240
in the center on the cross axis which is left to right,

80
00:06:39,260 --> 00:06:44,500
so we center items horizontally. Now with that,

81
00:06:44,500 --> 00:06:46,140
now this looks way better,

82
00:06:46,180 --> 00:06:48,780
we can't really see the input but that's the old thing, right?

83
00:06:48,970 --> 00:06:53,710
We'll have to style it so that we can really see it. We see the buttons though and we can see that our

84
00:06:53,710 --> 00:06:57,710
general layout and styling is taking some shape.

85
00:06:58,090 --> 00:07:01,440
Still, I'm not 100% happy about the look of this yet.