Making the “Library” screen scrollable

Currently, we only see the “Library” screen, because the other artboards are all to the right, off-screen (with the same distance between them as in the Sketch file). We’ll move them over later, when we need them.

When you scroll to the bottom of the Layer Panel, you’ll see that our Library artboard (now a layer, of course) contains three child layers: Status_Bar, Tabs, and Library_content. (The last two have children of their own.)

Well, the content of the screen itself is in Library_content, and with the ScrollComponent’s wrap() function we make it scrollable:

scroll_library = ScrollComponent.wrap $.Library_content

Our new ScrollComponent, scroll_library, will by default be scrollable in all directions, so also sideways, but that’s easily fixed by disabling its scrollHorizontal.

scroll_library.scrollHorizontal = no

The end of the page is partly hidden by the Tab Bar so we should add a bit of contentInset:

scroll_library.contentInset =
    bottom: $.Tabs.height + 80

I’ve used the height of $.Tabs, but added an extra 80 points to make space for the mini-player.