1
00:00:02,310 --> 00:00:08,520
So let's style these components there and for that, we want to apply some style to the text components.

2
00:00:09,120 --> 00:00:12,780
The text component does indeed support the style property

3
00:00:12,780 --> 00:00:19,680
as you can verify in the official docs but the text component actually does support less styling features

4
00:00:19,710 --> 00:00:20,610
than the view does

5
00:00:20,970 --> 00:00:26,030
and therefore, I'll wrap this into another view component and that's just the view component

6
00:00:26,040 --> 00:00:31,560
we are importing from React Native, that's also the part I meant with you only got a couple of base

7
00:00:31,560 --> 00:00:36,960
components but they'll get you very far because you work with views and buttons and texts all the time.

8
00:00:37,530 --> 00:00:44,730
So here I'll wrap this text with the opening and closing view component here and now here, we have more

9
00:00:44,730 --> 00:00:46,090
styling options.

10
00:00:46,290 --> 00:00:50,730
Now again, I'll not go for inline styles here but add styles to the stylesheet,

11
00:00:50,730 --> 00:00:54,000
for example we could name this list item but the name is up to you

12
00:00:54,210 --> 00:01:03,810
and let's say here we want to have a padding of 10, let's maybe give it a background color of this

13
00:01:03,810 --> 00:01:17,750
grey hex code here, give it a border color of black and also a border width of one

14
00:01:17,880 --> 00:01:25,720
and now let's assign list item as a style to this view by referring to styles.listItem here

15
00:01:25,770 --> 00:01:34,380
and with that if we save this, now our list item should look a bit better, learn React Native,

16
00:01:34,610 --> 00:01:39,620
this is how it looks like. Now some spacing would probably also be nice,

17
00:01:39,620 --> 00:01:46,850
we can achieve that with margin, padding is spacing between the border and the content, margin is spacing

18
00:01:46,850 --> 00:01:49,270
between the border and the surrounding contents,

19
00:01:49,280 --> 00:01:55,130
so the other elements around it and there, we could add margin 10 to add a margin in all directions,

20
00:01:55,460 --> 00:01:59,600
we could also just add a margin to the top or just to the bottom or

21
00:01:59,720 --> 00:02:06,050
and that's something which doesn't exist in CSS, you can add a margin vertical of 10 to have a margin

22
00:02:06,050 --> 00:02:08,560
to top and bottom but not left and right

23
00:02:08,720 --> 00:02:15,770
and that's by the way an example of how this is based on CSS but it's not the same because margin vertical

24
00:02:15,860 --> 00:02:23,210
wouldn't be a property you have in CSS, you have it in React Native. So if we now save that

25
00:02:23,210 --> 00:02:29,840
and we add learn React Native here,

26
00:02:30,030 --> 00:02:38,430
now you see there is some spacing between those items and of course also on iOS if we do it there.

27
00:02:38,550 --> 00:02:46,440
So this now adds our items and whilst we probably still don't win a beauty award, it's a good start

28
00:02:46,440 --> 00:02:51,050
at least and we'll dive way deeper into styling and all you can do there later in this course,

29
00:02:51,060 --> 00:02:54,090
we just have to get there step-by-step of course.

30
00:02:54,090 --> 00:03:00,750
Now one thing we have to adjust now by the way, the key here always has to be on the root element

31
00:03:00,750 --> 00:03:01,460
in your list,

32
00:03:01,500 --> 00:03:05,730
so the element which you are repeating and we're not just repeating the text anymore, instead we're now

33
00:03:05,730 --> 00:03:07,020
repeating the entire view,

34
00:03:07,320 --> 00:03:14,430
so the key should be added to the view here, not to the text in the view. That's why I got this warning,

35
00:03:14,430 --> 00:03:15,520
this error again,

36
00:03:15,600 --> 00:03:19,230
now with the key moved to the view instead of the text, this should be gone.