In the last section we got our album artwork to show up but now we've got another problem. 2
It appears that we can actually skirl through our list at all here. 3
So in this section we're going to fix up that bug a little bit. 4
Even though re-act need it has a lot of similarities with its web based cousin you know like running 5
react in the browser. 6
We've also seen a couple of differences. 7
The way in which re-act native decides to handle scrolling definitely fits into that list of differences 8
as well. 9
So by default when we make a really tall component re-act native It is not going to scroll. 10
So by default no scrolling doesn't behave like the browser we must always be aware of when we are rendering 11
a component that must require the user to scroll like up and down through our application. 12
Fortunately fixing this scrolling issue is a straightforward fix so enabling scrolling just takes two 13
steps. 14
First we will identify the GSX tags that we expect to be scrollable. 15
So kind of like the bulk section of content that we want to be scrollable. 16
And then second we will import a re-act made of component called skirl of you and wrap our content with 17
that. 18
So let's give this a shot. 19
So step one we need to identify the content that we expect to be scrollable. 20
So you might think well is that the album detail. 21
Not quite. 22
It is really the album list the album list is what renders our big old list of albums. 23
So its really this view right here. 24
I expect everything inside of this view to be scrollable. 25
So thats how we identify this we say what do I expect to be scrollable. 26
So now Step 2 we need to import a component called scroll view and then replace our existing view with 27
that scroll of tag. 28
So up at the top I will find my re-act native new component and I was going to replace this because 29
we're not going to use the tag anymore or replace it with scroll of view. 30
I mean going back down to our render method I'll find my view tag and I'll replace it with the scroll 31
view. 32
So scroll view is just how we say hey you know what whatever is in here and I want it to scroll I'll 33
just make it scroll. 34
So not the worst thing in the world. 35
Let's test the sentence simulator now. 36
Open it back up refresh. 37
And now I should be able to click and drag. 38
But wait a minute wait a minute I can scroll. 39
But it appears that even though I scroll down everything appears to just bounce back here. 40
So still a little bit of a kind of weird thing here going on. 41
So here's the next gotcha of Riak native. 42
And yes I know this framework has a lot of gotchas. 43
That's why you're taking the course with me right. 44
So you can find all the crazy things I've found and I'll just explain them to you. 45
Nice and easy. 46
So here we go. 47
Whenever you have a scroll of view you must add a style property of flex 1 to your root element. 48
So let's do that and I'll talk about exactly what's going on. 49
So I got to go back to my index view right here is my index container my app component. 50
I'm going to find my root view. 51
Here it is. 52
And I add to it a style of flex one. 53
And because I'm just adding this one single style I'm not going to bother with a separate styles object 54
I was going to like passus in here. 55
So with this flex one property does right as it says Please expand this component to fill the entire 56
content area of the device. 57
So yes I know that it looked like that was already the case here. 58
But again this is just one of those gotcha things you know I know that it looks like that scroll view 59
is taking up the entire width or area of the screen. 60
But again it's one of those gotchas. 61
So let's refresh this again. 62
And now when I scroll. 63
All right hot dog I'm scrolling through the entire list. 64
Perfect. 65
Just we want it. 66
So as you're scrolling through I'm sure the video probably you can see it if it appears that it's laggy 67
at all. 68
I guarantee you that is a property of the simulator. 69
If you ever tested it on your device everything is going to be just buttery smooth scrolling. 70
It is just because we're on the simulator and in particular not the best laptop in the world. 71
So when you put this unreal device everything is going to scroll very nicely. 72
OK. 73
So we now have just one feature left in this application. 74
We need to add a button to the bottom of each card here that our users can click to buy an album. 75
So let's start off with that feature in the next section.