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

These 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