Road to Mastering NativeScript UI

NativeScript Developer Day, Amsterdam 2019

NativeScript

http://shiv19.com/nsuimaster

Hi! I'm Shiva Prasad 👋🏻

@MultiShiv19

Partner at nStudio.io

NativeScript Developer Expert

Software Engineer at The Grainfather, Bevie

UI Widgets

Layout Containers

Themes

Layout Do's & Dont's

Animations

@MultiShiv19

Mastering UI Widgets

19 UI Widgets

Button, Label, TextField, TextView, SearchBar, Switch, Slider, Progress, ActivityIndicator, Image, ListView, HtmlView, WebView, TabView, SegmentedBar, DatePicker, TimePicker, ListPicker, Dialogs

...Also learn about View and ViewBase

@MultiShiv19

Use NativeScript Playground!
https://play.nativescript.org

It is your lab, go experiment!

For inspiration goto
https://market.nativescript.org

Read the API docs! - https://docs.nativescript.org/api-reference

@MultiShiv19

Mastering Layout Containers

6 Layout Containers

Stack Layout, Absolute Layout, Wrap Layout, Dock Layout, Flexbox Layout, GridLayout

...Also learn about LayoutBase

Start here: https://www.nslayouts.com/

@MultiShiv19

Layout Do's

Flatten your layouts as much as possible.
Keep your list view templates as lite as possible. Ideally, use GridLayout for this.
Carry out the tasks that relies on knowing the dimensions of your layouts in the onNavigatedTo event.

@MultiShiv19

https://play.nativescript.org/?template=play-js&id=KozCHT&v=2

Layout Measurement Demo

@MultiShiv19

Layout Do's

Keep padding/margin handling constrained to a practice you and your team agree on.
Use grid layouts when you want to layer multiple widgets or sub-layouts.
Prepare as much data as possible before binding to a view

@MultiShiv19

Layout Dont's

Don't use a Layout just to create a separator line. You can use Labels instead.
Nesting a single layout inside a parent layout just to add padding? Why not use borders instead?!
GridLayout may not be the best option for all types of layouts, choose your layouts wisely.

@MultiShiv19

Layout Dont's

Never place a ScrollView or a ListView inside StackLayout, let them breathe!
Use percentage instead of fixed number to set the dimensions of your layouts whenever possible.
Use *ngIf or remove/add logic down to minimum (only use if absolutely have to). You can use visibility property instead.
Don't use a Repeater or *ngFor for lists larger than what can fit
on the screen.

@MultiShiv19