When it comes to styling a list, we of course can style both the list items and also the list
itself.
So let's start with the items
and here I'll actually cut that mark up here so to say, so that jsx code for an item and I'll add a
new function outside of the component function because we don't really need anything from inside the
component and I'll just name this render list item, the name is up to you.
It's a function and this function in the end should return some jsx code here,
so it should return this jsx code here and to work correctly, it of course needs to get let's say
our value which we want to output.
So here, I'll then use value as a key and output value here between the text tags and now we can
use render list item down there where we call map
and here, there I simply want to execute render list item for every item we're mapping and I forward
guess to that as a value in a render list item.
Now if we do that, we should see the same result as before,
so nothing too fancy here but now we have a leaner markup down there, leaner
jsx code down there and have our list item jsx code here.
Now we can style this and of course I want to style my view here, for this I'll add a style here from
the stylesheet which I'll name list and in there,
I actually now want to have two text items and one should be the number of the round and the second
should be the value,
so here I need an additional argument, I need the value but also the number of the round or numOfRound
as I name it here
and I want to output this dynamically here,
maybe with this hash symbol in front of it just for stylistic reasons.
So now we have these two texts in this list here and there,
I actually don't want to use the text but the body text so that I have my default text styling.
So for that, let's import body text from components body text and use body text instead of the normal
text here in our list item. With that, we're using the right font
and now let's add that list object to our stylesheet so that we can style the list item, actually
this should be called list item therefore and not list.
So let's add list item to the stylesheet now, like this
and now of course we can style this in whatever way you want,
I will style it in a relatively easy way here, just give it a border color of let's say black or maybe
this slight grayish color here. A padding in all directions of let's say 15 to have some spacing, a margin
on the vertical axis of 10
so that we have some spacing between the list items and they don't sit right next to each other. A background
color of white maybe
and of course you can use different colors here if you want to.
Now that's a start,
now when we're setting a border color, we also need to set up border width here though otherwise we won't
see a border
and I'll set this to one and very important, I want to have these two text components in my view sit
next to each other and not above each other which would be the default because a view uses flexbox
and uses a default flex direction of column to have the item sit next to each other on a horizontal
axis, we add flex direction row here just like this.
And with that if we save this and the app rebuilds, let's give it a try and see how that looks like,
yes that looks okay-ish but there still is room for improvement.
For example, I want to set a width on that list item to make sure that it's not just as wide as its content
needs it to be but as wide as we tell it. Now to add a width, you can add width here to list
item
but if we do that and set this to let's say 80%, you'll actually see that this behaves not in
the way you want it to behave right,
so this does not look right,
now the content is somehow moved but the item itself is certainly not wider. To style a list properly,
the best way is to simply wrap it into a view and then style this view.
So here, we can add a view,
give it a style of let's say list,
so here I'm referring to styles list and add this list object to our stylesheet now, like this
and on this list, we can now set a width of 80% and get rid of the width here on the list item.
If we do this with this wrapping view, you now see the list items have the correct look and that's just
something to be aware of.
If you want to control the height or the width of your list, of your scroll view, then don't add the style
to the list items,
also don't add it necessarily directly to the scroll view because of how this works internally but
instead simply wrap a view around the scroll view where you set that desired width and height.
Now what you'll notice is that on the list item, it would be nice if we had the round number being
output there and then had some spacing between the round number and our actual guess and to achieve this,
for one we need to set a style here on list item,
we can set justifyContent which controls how the content of this view is laid out along the main
axis which reflects direction as the horizontal axis and there, I'll use space around to distribute
the available free space around our text items here and now to also output the number of the round which
we expect as an argument here in render list item, we can go down to our map function and there, we actually
do get a second argument in this function which map calls automatically and that's the index of the
item we're outputting,
so we could forward that index here to render list item or index plus 1 since it will start at 0 and
we probably want to print one for the first round instead of 0.
Now with that out of the way, if we add this, now this looks a bit better and maybe we actually switch
this look here from space around to space between, I think that looks nicer but before I save this and
update this, you will also notice that one issue you have with that is that the round number is not actually
correct.
The first round is the bottommost round because we add new rounds at the beginning of the list,
therefore the index is not the right measure for the route number because the index is always 0
or if we add 1, it's 1, for the first list item
but the first list item is actually not our first round,
instead since we add new rounds as the first list item, the first list item is our latest round and certainly
not the first one.
So to fix that, what we can do is here in render list items, instead of using the index, we can of course
use our past guesses list here and get the length of that list and then deduct the index from that
and that gives us actually the correct round number for a given list item.
So now if we do that and we restart this, now we see round number one is the guess seven and that stays
number one if we add another guess
and now this seems to work correctly here.
You will also see that as soon as we exceed our boundaries here, of course we can scroll the list
and that also seems to work just the way it should.
Let's also give this a try on Android here, let's start a new game there and let's hope we don't win too
early, yes
that seems to work but there, I actually can't scroll.
So on Android, this is actually not working correctly,
this list is not scrollable there.
So what's wrong on Android?
Now whilst it does scroll fine on iOS, for the scroll
view nested in a view to scroll fine on Android as well, make sure that the surrounding view actually
uses flex one,
so add this to the list style here which is the style applied to the view which is wrapped around the
scroll view.
With that added, if we now try this again on Android,
you'll now notice that now this is scrollable as soon as you exceeds the boundaries of the screen
and on iOS, it should still work as before
and that being iOS, we can even scroll without it exceeding the boundaries,
that's just the default iOS behavior that you can balance such lists a bit.
So now we have that scrollable list here with scroll view and map and it works on both Android and
iOS.