Shiva Prasad
Lead Software Developer at BFit Technologies and Partner at nStudio.io
Road to Mastering NativeScript UI
NativeScript Developer Day, Amsterdam 2019
NativeScript
Hi! I'm Shiva Prasad 👋🏻
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
@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
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
Learn Themes!
Also don't forget the icon fonts!
@MultiShiv19
Animations
Some Useful Plugins for Animation:
https://www.npmjs.com/package/nativescript-effects
Lottie Animations combined with NativeScript Animations
@MultiShiv19
Thanks!
NativeScript
@MultiShiv19
sp@shiv19.com
Road To Mastering NativeScript UI
By Shiva Prasad
Road To Mastering NativeScript UI
The user interface of your application plays a vital role in user engagement. Therefore it is important for it to be as performant and fluid as possible. Let’s learn about the do’s and don’ts for keeping your NativeScript UI snappy!
