In the last video we saw how he could fix this layout issues especially on a small device by adding
in a flex one property to this view element in this video.
I want to show you a slightly different solution we could take.
I wanted to put this alternative solution into a second video especially because this is a little bit
of syntax that we're going to use quite a bit throughout the rest of this course.
And I just want you to have a separate video that you can refer back to in the future to understand
what this thing is doing.
So it turns out that whenever we make use of a view element just as I was mentioning in the last video
sometimes this thing can be a little bit destructive or kind of interrupts the layout we're going for.
In other words sometimes a view element is going to accidentally kind of span off the screen in an attempt
to fit all of its contents.
And in other cases it's going to shrink itself down just to fit its contents which could also have some
really bad consequences as well.
So sometimes rather than using a view every single time that we need to wrap some other number of elements
because remember that's the only reason we're using a view here.
We can only return one element by default.
We could instead return.
Well not an element.
So I'm going to select everything inside of the less than greater than symbols and just delete it like
so.
So I've now got an empty tag.
I'll then go down to the closing view down here and delete the word view from there as well.
So I've got a closing or empty closing tag here as well.
So this is essentially a little bit of syntax that allows us to return a bunch of different elements
but this does not actually render an element on the screen.
So now we do not have some kind of containing element that's wrapping all this stuff.
Instead we've got some kind of invisible thing by using this kind of place holder element.
We don't have to worry about adding in that flex one property all the content we're trying to display
here will be automatically rendered on the screen by React Native but usually or the default that React
Native is going to use here is to not allow any of this content to go off the edge of the screen.
So by just extracting that view and not making use of it anymore we can solve ourselves a lot of issues
in the future it's going to save this and then flip back over Angela notice that I have now got this
same thing we had before so I can still scroll through this entire list.
So in general we like to make use of this place holder anytime we need to return multiple different
elements whenever using a view would actually kind of harm our layout overall.
So throughout this course as I mentioned we're going to use this place holder quite a bit.
Any time that we need to return a grouping of elements and we don't want to have to worry about having
a wrapping view kind of constrain or expand too far to fit all of our content.
Okay.
So let's take a pause right here.
Now that we've added this in and continue with one last fix in the next video.