So let's style these components there and for that, we want to apply some style to the text components.
The text component does indeed support the style property
as you can verify in the official docs but the text component actually does support less styling features
than the view does
and therefore, I'll wrap this into another view component and that's just the view component
we are importing from React Native, that's also the part I meant with you only got a couple of base
components but they'll get you very far because you work with views and buttons and texts all the time.
So here I'll wrap this text with the opening and closing view component here and now here, we have more
styling options.
Now again, I'll not go for inline styles here but add styles to the stylesheet,
for example we could name this list item but the name is up to you
and let's say here we want to have a padding of 10, let's maybe give it a background color of this
grey hex code here, give it a border color of black and also a border width of one
and now let's assign list item as a style to this view by referring to styles.listItem here
and with that if we save this, now our list item should look a bit better, learn React Native,
this is how it looks like. Now some spacing would probably also be nice,
we can achieve that with margin, padding is spacing between the border and the content, margin is spacing
between the border and the surrounding contents,
so the other elements around it and there, we could add margin 10 to add a margin in all directions,
we could also just add a margin to the top or just to the bottom or
and that's something which doesn't exist in CSS, you can add a margin vertical of 10 to have a margin
to top and bottom but not left and right
and that's by the way an example of how this is based on CSS but it's not the same because margin vertical
wouldn't be a property you have in CSS, you have it in React Native. So if we now save that
and we add learn React Native here,
now you see there is some spacing between those items and of course also on iOS if we do it there.
So this now adds our items and whilst we probably still don't win a beauty award, it's a good start
at least and we'll dive way deeper into styling and all you can do there later in this course,
we just have to get there step-by-step of course.
Now one thing we have to adjust now by the way, the key here always has to be on the root element
in your list,
so the element which you are repeating and we're not just repeating the text anymore, instead we're now
repeating the entire view,
so the key should be added to the view here, not to the text in the view. That's why I got this warning,
this error again,
now with the key moved to the view instead of the text, this should be gone.