Now in the list we're rendering here, our list items are as wide as the list because we're wrapping list
on this view here around our scroll view,
therefore this sets the width for the scroll view add that sets the width for the items in there.
Now let's say we had a different width here on the list item, let's say the width of a list item should
be just 60% of the list,
so it's not 100% which is the default but just 60%. If we do that and we get started, you
see now this sits on the left which makes sense, the default positioning here
if you set a width on an item which is inside of a flexbox and list items are inside of a flexbox
because scroll view internally also uses flexbox in the end, even though there are some differences
compared to the normal flexbox and I'll come back to those but it still uses flexbox and therefore
since we set a width, the default of stretching child items along the cross axis and the cross axis would
be the horizontal axis because we have flex direction column as a default but the default stretching
is overridden because we have a width on our list item, so on our child elements. Now we still might
want to center these items in the list though and for this, you can go to the scroll view and assign a
style there,
though not through the style prop which you can use but which doesn't allow you to style anything but to
style the content in a scroll view and apply for example flex settings for the content, you need to use
the content container style and that's just something to memorize or to look up in the official docs of
course. For scroll view and for FlatList, you have that content container style which you use to control
the layout inside of that scroll view.
Now here on that content container style, we can now refer to styles list and therefore, let me actually
rename this current list style we're applying to that wrapping view the list container because in the
end it's a container around our list and this here is the list itself.
Alternatively, you could have named this list content of course but I'll just name it list and rename
the other thing to list container. Therefore, this here will be renamed to list container and
now we can add a new list property here to the stylesheet and that's now inside of the scroll view,
styling our container or laying out our container content to be precise and there, since this uses flex
box internally, you can use align items to control the alignment along the cross axis and set this
to center and this should now make sure that items are centered again in case they are smaller and that's
indeed what's happening here.
So with that, you know how to control and lay out the content inside of a scroll view or of a list
in general. Now what if you also want to control the flexbox along the main axis though?
Let's say our list here actually shouldn't start right below this box here with our controls but a little
bit further down, it should start at the bottom of the screen and then grow up to the top and then only
be scrollable when it reaches the top.
This can also be controlled with our list style which is the style applied to content container style,
so with this content container style, you can control this too by adding justifyContent because justify
content allows you to position content along the main axis of the flexbox and flexbox main axis by
default is the vertical axis because the default direction is column.
So here, let's now use flex end instead of the default which is flex start and flex end should now actually
move the items to the end of the list.
So let's see whether that works,
huh,
doesn't seem to work, right?
The problem here is that the scroll view only grows this internal view which it wraps in the end when
new items are added,
now we want that internal view to grow automatically. On a normal view,
we would achieve this by adding flex one.
So let's try this here on this list styling we add to the scroll view as well.
If we add it here, now you see this behaves correctly, it starts here at the bottom and now let's grow this
and hope we don't solve this too early
and you see, we can scroll. So this actually is growing and works in exactly the way we want. It's scrollable
and generally works in the way we want but you'll notice that you actually can't really scroll it
such that you always see the most recent item. You can scroll there but then it jumps back up and that's
probably not what we want, on Android,
it also doesn't work. There,
if we now start guessing, you'll see the same behavior,
well if I would get there, there the only difference is that it's broken for a different reason,
I can't even scroll. So flex one doesn't really do the job,
what you can use there instead is something we haven't used before and that's flex grow. Now flex grow
also make sure that the item to which you add this grows and takes up as much space as it can,
just like flex one, the difference is that flex grow works a bit differently internally,
it's more flexible than flex. Flex
simply says take all the available space in all directions you can get, flex grow basically instructs
the container to be able to grow, to be able to take as much space as it can get and it will but it keeps
the
other behavior it has normally, in this case of the scroll view, where this is scrollable and can exceed
the boundaries of the screen as well.
So it's a bit more flexible and you probably don't need it that often on a normal view but on a scroll
view, it's exactly what we need
and I'm just showing this here because this is a special case which you just have to know or which you
might stumble over
and typically you then find solutions on stack overflow and so on, here you find it in this course because
it is a scenario which you might encounter and therefore hopefully, you can then recall this lecture and
see how to solve this.
So I added flex grow to that list property and now let's give this another try. Here on iOS,
if we start guessing numbers here, now you see I can actually scroll such that the latest item is visible
and I can still also scroll such that the oldest item is visible,
so now this is showing the behavior we want, thanks to flex grow.
And on Android, it'll be the same if we start a game there,
you see now I can scroll this here as well and I can see both the most recent guess and the oldest guess.
So this is now working in the way it should here on Android and iOS and I was showing all of this
simply so that you are aware of these patterns, of this special content container style on scroll view
and I also wanted to make sure that you were aware of some of the issues you can run into when you start
styling lis tsand when you want to add your own layout there, then these are some tricks which can be
very handy if you encounter that situation in your app.