1
00:00:02,230 --> 00:00:08,300
So we got started with the text input, right now we're not doing anything with the values the user enters

2
00:00:08,350 --> 00:00:14,020
but before we do that, let's make sure that actually the button is not below that input but next to it

3
00:00:14,020 --> 00:00:15,520
on the right

4
00:00:15,520 --> 00:00:17,700
and for that again, we need to work on the layout.

5
00:00:17,710 --> 00:00:21,970
That's why I have this extra view here around the text input in the button.

6
00:00:21,970 --> 00:00:27,490
We wouldn't need that but now with that nested view, we can control how these two items are aligned to

7
00:00:27,490 --> 00:00:31,440
each other, by again adding the style property here

8
00:00:31,660 --> 00:00:38,980
and now for layouting, for positioning things, React Native uses flexbox which you also might know

9
00:00:38,980 --> 00:00:45,050
from the web, in case you don't, attached you'll find resources that gets you started with CSS flexbox.

10
00:00:45,220 --> 00:00:49,840
You don't need to know flexbox in and out but it helps to know a bit about it,

11
00:00:49,840 --> 00:00:56,590
flexbox work such that it positions elements inside of a view next to each other or above each other,

12
00:00:56,800 --> 00:01:00,200
by default above each other in React Native and

13
00:01:00,230 --> 00:01:06,460
you can change that by setting flex direction from column which is the default to row

14
00:01:06,880 --> 00:01:12,610
and by just adding this, on this view, we override the default which is the default which is why

15
00:01:12,610 --> 00:01:18,430
we don't have to set it off column and now already, we'll see that the button in the text input sit next

16
00:01:18,430 --> 00:01:19,180
to each other,

17
00:01:19,330 --> 00:01:26,100
doesn't look that great yet but they're sitting next to each other. Now to make that look better,

18
00:01:26,130 --> 00:01:27,960
we can also add more,

19
00:01:28,140 --> 00:01:34,300
for example you can define how things are aligned and distributed in their row or column.

20
00:01:34,650 --> 00:01:41,700
For example with justify content, you can control how items are distributed along their main axis and

21
00:01:41,700 --> 00:01:45,410
with row, the main axis is from left to right,

22
00:01:45,480 --> 00:01:50,570
if that would be column, the main axis would be from top to bottom.

23
00:01:50,630 --> 00:01:57,980
So now we could specify a value and here my IDE even gives me autocompletion which is very convenient,

24
00:01:58,130 --> 00:02:05,210
we could specify a value of space between for example. What this means is that all the remaining free

25
00:02:05,210 --> 00:02:07,690
space is between the two elements,

26
00:02:07,760 --> 00:02:12,560
so they're now not sitting directly next to each other but instead, there is some free space between

27
00:02:12,560 --> 00:02:13,590
them as you can tell.

28
00:02:14,590 --> 00:02:18,010
Now we can also align them on their cross axis,

29
00:02:18,060 --> 00:02:23,950
so main axis for flex direction row was left to right, cross axis

30
00:02:23,950 --> 00:02:31,130
then is top to bottom. For flex direction column, the main axis would be top to bottom and the cross axis

31
00:02:31,130 --> 00:02:32,220
would be left to right,

32
00:02:32,270 --> 00:02:38,750
so the cross axis simply is the opposite of the main axis so to say. Justify content positions along

33
00:02:38,750 --> 00:02:46,910
the main axis, with align items you can control how the child elements of this view are aligned along

34
00:02:46,910 --> 00:02:51,670
the cross axis and there you have different values, like for example center.

35
00:02:51,980 --> 00:02:58,250
So in this case, since we have flex direction row, this should vertically center all items which means

36
00:02:58,250 --> 00:03:05,230
that the button now looks nicer and is simply centered there in the middle of this input. Well and now

37
00:03:05,230 --> 00:03:10,150
we can also ramp up the width of that input a little bit by going to the text input and there on the

38
00:03:10,150 --> 00:03:17,050
style, we can also add a width of let's say 200, to give this a width of 200 pixels which means that this

39
00:03:17,050 --> 00:03:24,170
now is a bit bigger. Alternatively by the way, you could have also chosen a percentage value like 80%,

40
00:03:24,560 --> 00:03:30,830
which means that this takes 80% of the available width made available by its parent component,

41
00:03:30,890 --> 00:03:38,180
so by the view that surrounds it. And now with that, we had a look at the first important fundamentals,

42
00:03:38,450 --> 00:03:44,720
about laying things out in React Native and styling things but right now, we're doing all of that with

43
00:03:44,720 --> 00:03:51,040
that concept called inline styles, which means we're setting up the styles directly on the elements and

44
00:03:51,050 --> 00:03:52,250
that's not ideal.