1
00:00:02,240 --> 00:00:04,430
Now this is also a nice practice for you,

2
00:00:04,460 --> 00:00:09,440
you can pause the video here and try positioning these two buttons next to each other on your own,

3
00:00:09,440 --> 00:00:15,190
only the two buttons, not the input and the two buttons but these two buttons should be in a new line below

4
00:00:15,200 --> 00:00:17,430
the input but then sit next to each other.

5
00:00:17,570 --> 00:00:23,610
After the short pause which you can use to pause the video, we'll of course do that together.

6
00:00:23,650 --> 00:00:25,440
So were you successful?

7
00:00:25,450 --> 00:00:26,950
Let's try it together.

8
00:00:26,990 --> 00:00:34,670
The key here is to use flexbox and another view because again as I mentioned earlier and as is really important

9
00:00:34,670 --> 00:00:41,530
to understand, view components are your core component for organizing other components or for being used

10
00:00:41,530 --> 00:00:43,570
as a container which you can also style

11
00:00:43,600 --> 00:00:49,610
but here in this case, to organize other components. So I'll move the two buttons inside of that view

12
00:00:49,720 --> 00:00:55,720
and now we can assign a style to that view and that style of course will be defined here in our style

13
00:00:55,750 --> 00:00:59,660
object and I'll name this button container,

14
00:00:59,710 --> 00:01:06,400
this is up to you, this name and in there, I want to set a flex direction of row to have them sit next

15
00:01:06,400 --> 00:01:13,360
to each other and then, I'll set justify content of space between to have the free space between the

16
00:01:13,360 --> 00:01:16,330
two buttons.

17
00:01:16,340 --> 00:01:25,190
Now let's add the style here to that view, styles button container and save this and now here are the

18
00:01:25,190 --> 00:01:32,420
buttons but to have the free space have an effect here, which will be even clearer on Android by the

19
00:01:32,420 --> 00:01:34,900
way, that it's currently not having any effect,

20
00:01:35,000 --> 00:01:37,880
so that space between is not having any effect,

21
00:01:37,910 --> 00:01:41,820
let me quickly show this on Android.

22
00:01:42,030 --> 00:01:42,410
You see,

23
00:01:42,420 --> 00:01:43,890
there is no free space.

24
00:01:43,920 --> 00:01:47,790
The reason for that simply is that we have no width assigned to our button container and therefore as you

25
00:01:47,790 --> 00:01:48,200
learned,

26
00:01:48,210 --> 00:01:50,100
it only takes the width of the children

27
00:01:50,370 --> 00:01:52,660
and that is simply the width of the two buttons

28
00:01:52,710 --> 00:01:53,820
added together,

29
00:01:53,940 --> 00:01:56,570
hence there is no free space to add in between.

30
00:01:56,610 --> 00:02:01,410
So we have some free space in between, we simply need to assign a with to the button container

31
00:02:01,530 --> 00:02:05,800
and now that width is of course up to you. Since the input has 80%,

32
00:02:05,820 --> 00:02:14,340
we could go with 80% here as well or maybe with 60% to have it a little bit more narrow

33
00:02:14,400 --> 00:02:20,130
than the input above, so that the buttons do not sit on the edges of the input but that's of course up to

34
00:02:20,130 --> 00:02:21,090
you

35
00:02:21,090 --> 00:02:27,060
and therefore now with that if this reloads and we have a look at this on Android

36
00:02:27,060 --> 00:02:33,390
by using this convenient way of closing it and restarting it, now we should see some free space between

37
00:02:33,390 --> 00:02:34,930
these two buttons,

38
00:02:34,950 --> 00:02:36,730
yes that's looking good.

39
00:02:36,770 --> 00:02:38,700
And of course you can play around with that,

40
00:02:38,730 --> 00:02:42,830
you could also alternatively of course add styles to the buttons,

41
00:02:42,840 --> 00:02:49,440
you can add style props here too and add a margin on the left and right of each button, that would have

42
00:02:49,440 --> 00:02:50,510
worked too.

43
00:02:50,520 --> 00:02:56,250
You can also play around with other values here, like space around to have the free space to the left and

44
00:02:56,250 --> 00:02:58,710
right of the buttons and not just between them.

45
00:02:58,770 --> 00:03:03,000
These are all things you can do, I'll go with space around here and have a final look at this

46
00:03:03,000 --> 00:03:06,000
but ultimately that's of course simply something that's up to you.

47
00:03:06,030 --> 00:03:11,400
Important here is of course that you understand how you can achieve something with the help of a view

48
00:03:11,550 --> 00:03:15,390
which you wrap around your buttons and flexbox then

49
00:03:15,600 --> 00:03:18,900
and with that, I'd say we have a decent look here.

50
00:03:19,110 --> 00:03:26,550
Now one last thing, really last thing which I now still want to do is resize these buttons because they're

51
00:03:26,550 --> 00:03:31,380
not equally sized and I think it would look a bit nicer if they had the same size.

52
00:03:31,410 --> 00:03:37,920
Now on a button, you can't add a style prop and set a width, no matter if you're using inline styles

53
00:03:37,950 --> 00:03:40,700
or the stylesheet object, instead

54
00:03:40,710 --> 00:03:44,050
and that's something you have to know which is why I'm covering it here,

55
00:03:44,100 --> 00:03:51,860
you have to wrap your button into a separate view, like I'm doing it here and then give that view a button,

56
00:03:52,070 --> 00:03:59,270
for example here we could add styles button, referring to a button property down there, to each view and

57
00:03:59,270 --> 00:04:05,990
there on this button property which I'm now adding, you could add a width of let's say 40% and

58
00:04:05,990 --> 00:04:08,780
that will be 40% of the parent of that view,

59
00:04:08,780 --> 00:04:15,440
so 40% of that button container view which itself takes 60% of the entire available width

60
00:04:16,220 --> 00:04:20,580
and we can do this on the other button as well of course.

61
00:04:20,600 --> 00:04:28,010
So that's just something you have to know, if you add your surrounding views here, around your buttons.

62
00:04:28,010 --> 00:04:34,490
Now with that if we again restart Android, we should have buttons that are equally sized which of course

63
00:04:34,580 --> 00:04:36,710
often is something you want.

64
00:04:36,710 --> 00:04:42,980
Of course you could have also used a pixel value here instead of percentage values but now with that, I'm

65
00:04:43,220 --> 00:04:44,710
really happy,

66
00:04:44,780 --> 00:04:48,590
I think that's now really an app that's looking good, behaving good

67
00:04:48,710 --> 00:04:51,320
and yes, it's a good start with React Native.

68
00:04:51,320 --> 00:04:57,140
Now obviously, there is so much more we can learn and we will dive into, so much more we can do regarding

69
00:04:57,140 --> 00:05:02,540
the styling because as already mentioned, this is certainly not the most beautiful app you ever built

70
00:05:03,110 --> 00:05:05,990
but we covered a lot of important fundamentals here.