ScrollView

[00:00:00]
>> Kadi Kraman: Next up, let's look at scrollable views. So right now we don't have enough content to float over the screen, but if I add more content here.
>> Kadi Kraman: So this is gonna be more content that we have space for on the screen and on the web the screen will automatically become scroll over at this point, but on native it doesn't.

[00:00:33]
So if you have more contents that can fit on the screen, it simply just overflows the screen and you can't see it. So if you need an area of the screen to be scrollable, you need to explicitly make it scrollable. So instead of a view, we can use a scroll view.

[00:00:48]
So we import scroll view from React Native
>> Kadi Kraman: And replace the containing view with the scroll view. And now It scrolls. Now one thing you'll notice is that the last item on my list actually overflows a little bit. And the reason this is happening is because of this container style because we've added this padding top.

[00:01:18]
So if I remove this, It goes straight to the end of the screen. How do I add a padding but also prevent this overflow? There's another prop on Scrollable Elements. It's called Content Container Style.
>> Kadi Kraman: So if you need to add any UI styles like paddings and margins to a scrollable element, you'll add them to the content container instead of the container.

[00:01:50]
>> Kadi Kraman: So let's do styles content container.
>> Kadi Kraman: And create the Style and move this padding down. Another handy thing you can do with scrollable elements is that you can make parts of it sticky. So there's a property on the scroll view called sticky header indices. And it takes an array and an array of numbers so indices that you want to make sticky.

[00:02:24]
So if I make this zero, it actually makes this header sticky. And I wanted to add some stars because I wanted it to just float here. I'm trying to remember what I did. But I think I did padding 24 here. And padding 12 here, so the 24 is to make up for this padding.

[00:02:53]
>> Kadi Kraman: There we go. So then you have it stay sticky at the top. And also obviously, we don't have any background color right now in the text input, so to make this not shine through, in the TextBurns mode, let's do a background color of theme, color, white. There we go.

[00:03:16]
And now we have a floaty text input at the head of our shopping list.