Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Position Views in a Dock Using DockLayout

    2 - 4

    We will use the DockLayout component to create a layout container which allows us to specify sides (top, bottom, left, right) to dock child components to in a NativeScript app.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Start by adding a dock layout to your page. Inside of the dock layout, we're going to layout four buttons, and they're going to take the dock property, which accepts 'top', 'left', 'right', 'bottom' as the value. We're going to color these inline with the background color, just so we know exactly where they end up inside of the dock layout.

    We'll add two more buttons. This one we'll dock to the bottom of the dock layout, and our last button, we will dock to the left. And we run this, we'll have four buttons inside of the dock layout positioned by their dock property, 'top', 'right', 'bottom', and left''. The 'top', 'right', 'bottom', and 'left' button.

    But the dock layout also provides the stretch 'last' child property, which set to 'true' is likely what you'll use in a production application, if you use the dock layout. We'll set another button with the text to fill, and we'll run this. And you're going to see this button consume all of the space in the center of the dock layout, between the other buttons that have the dock properties specified -- the 'top', 'right', 'bottom', 'left'. And here's your last child, which fills the remaining space inside of the dock layout.