Making the “Recently Played” albums scrollable
The whole “For You” screen is currently scrollable, but that doesn’t inhibit us from making parts of it also scrollable.
The “Recently Played” section contains many more albums than we can currently see. Let’s make it scroll horizontally.
recentlyPlayed = ScrollComponent.wrap $.Recently_Played_albums recentlyPlayed.props = scrollVertical: no contentInset: right: 20
20 points of content inset will make the last album line up with the “See All” button.
Limiting scroll movement
There is one small thing we need to fix, though. You’ll notice that when scrolling left or right, you can inadvertently also scroll up or down. That’s not how it behaves in the original app.
When you start scrolling in a certain direction, it should block scrolling in the other direction. For this, we have to enable
directionLock on both ScrollComponents. They should look like this:
# ScrollComponent for the whole artboard scroll_for_you = ScrollComponent.wrap $.For_you scroll_for_you.props = scrollHorizontal: no contentInset: bottom: $.Tabs.height + 40 directionLock: yes
# ScrollComponent for the Recently Played section recentlyPlayed = ScrollComponent.wrap $.Recently_Played_albums recentlyPlayed.props = scrollVertical: no contentInset: right: 20 directionLock: yes