Native Date Picker

In this last part, we will design a beautiful date picker screen where the user can select dates.

Calendar Page

Let’s create a new page and name it: Calendar Screen. Similar to the other pages, disable the scrolling, set the Status Bar to Light and set the BG Color to #17182B.

Navigation

The top UI is the navigation so let’s add a Stack H: Navigation.

• Set the Distribution to Space Between
• Set the Height to Auto
• Add a padding right of 16
• In it, add a Back Button component and a Text “Cancel”, the Type is Headline and the color is white

Info Container

Right after, we have the Info Container, add a Stack V: Info.

• Set the Gap to 8PT, Height Auto
• Add paddings (42, 0, 0, 16)
• Add a Text “2-night stay”, the Type is Title 3 - Bold and the color is white
• Add another Text “Mon, Oct 24 - Wed, Oct 26”, the Type is Subhead 1 and the color is System Gray

Calendar Container

Let’s add a Stack to contain our Data picker element. Name it: Calendar Container.

• Set the Height to Auto, Width to 90%, alignment to Center and distribution to Start
• Set the margins (128, 24, 24, 24)
• Add Corner Radius to 20
• Add Borders 1PT white at 10% and BG Blur Dark
• Add Drop Shadow: Offset X 0PT, Offset Y 10PT, Blur 20 and Color Black at 30%

Date Picker

In the Container, add a Date Picker element. In Settings, you will see different Mode and Style. I recommend you to play with it and choose which one fits you the most. Set the Mode to Date and Style to Inline. Set the Tint to Blue. In Appearance, you can also set the UI Style, select Dark.

Background

To make the Calendar pop more, let’s add a background image. Add an Image, select the Blue Blob. Set the Height to 348PT, Pin To Center Center and Pin To Page.

Booking Button

To fill the bottom spacing, add a Booking Button from your component and change the text to Save.

Interactions

For the interactions, go to the Detail Screen, select the Rectangle Button and add a Tap trigger with Go To Page action. Select the Calendar Page with a Scale In animation from the Right at 0.5s Ease In & Out. Then, from the Calendar Page, select the Back Button, add a Tap trigger with Back to Page action.

For the Cancel and the Save Button, add a Tap trigger with Go to Page action. Select the Home Screen with a Scale In animation from the left with 0.5s Ease In & Out.

Conclusion

We just completed our fully functional prototype made with Play. Everything is working with nice interactions and animations. So this is the end of the course, I hope that you have learn just enough to create your own amazing prototype!