NativeScript Tips & Tricks

General

A <div> is the simular to <StackLayout>
Design Limits - Don't go in thinking every Native component is super configurable. They are not, either limit yourself to whats possible or fallback to using basic layouts / components. For example tabs on iOS are always at the bottom, cannot change it unless you do iOS specific JavaScript. Also being able to style the text color, tab color, active tab color, or borders may not be possible, depending on iOS or Android. You can go deep down into the rabbit hole and more times than not, it faster to program your own component based of simple native components.
Live Reload is basic at best, its better than nothing but the bigger issue is running multiple emulators at once the feature reloads one emulator at a time and if your doing JavaScript or TypeScript changes, then the reload time is too much. They have plans to improve this. Also on Windows there are live reload issues, not reloading, forcing you to stop and rerun the entire tns run process. NativeScript 4.0 (--bundle flag with tns run) is suppose to help this. Windows support is a big issue as NodeJS file syncing has always been a problem, its not a NativeScript issue specifically. My honest oppion is to avoid developing on Windows if possible... sorry? NativeScript 5.0 has gotten a little better as it has moved over to webpack, so syncing has become more reliable.

Keyboard Using IQKeyboardManager has almost perfect but you cannot modify the layout WHILE the keyboard is showing. The layout is not recalculated and you'll end up not being able to scroll to the bottom. There are functions to recalc layout and stuff but none of that seems to work. Overall just don't modify the layout while the keyboard is showing.
Event Delegation On Android, you can assign an event to an element and if anything inside the element is tapped, the event will propagate. But on iOS this does not work, so if you have a StackLayout with a Button inside, and bind the event to the StackLayout and someone taps on the Button, then you will not trigger the event (unless its on Android).
ScrollView On iOS if you don't wrap a scrollview with an outter layout, then content will scroll under the header and status bar. While you get that nice blurred affected that is native to iOS, your content also will render under those bars meaning the users will not see the first 80 - 100 pixels of your content.

Pixels Dont add suffixes to measurments like margin: 10px is a no no, just use margin: 10
Forced Inlined Styling There are some issues with getting CSS properties to work as expected. Because of this you may need to force inline styling for a given element. I.E <Button marginTop="0">.
Cascading NativeScript styling doesn't always cascade correctly. You will find yourself having to use the expanded versions of styling for example margin: 0 may need to be margin-top: 0; margin-left: 0; margin-right: 0; margin-button: 0.

Design Stick with GridLayouts for complex layouts. There are too many issues with StackLayout and other layout elements, as they are not consistant between iOS and Andorid. There are bugs reports that are valid, but mostly backlogged because you can just use GridLayout or another layout to work around the issue.

On Android, button height cannot be automatically calculated, so if you expect to have padding and text, and think height will be calculated, your wrong. Buttons will fill entire space.
On Android, buttons will have something already style like round borders and drop shadow. You need to override borders to remove this styling, but you cannot just border: 0, you need to do this for EACH side. will be magically calculated, think again. I've had to add heights for every button.
On Android margins and paddings do not work as expected, this is referenced in Styling, but basically margin: 0 does not instead you will need to set margin-top: 0; margin-left: 0 ....
On Android, using the pusdo :hightlighted to have a button show its been pressed, does not reset when in a scroll view. NativeScript/NativeScript#4967
Need an image with a button? Just use a Layout element, with an Image and Label element you'll get much more flexability.

On Android, if you want to change the border color, you must set the border width, which also reset all other border styling. Also if you want to remove the border altogether, you cannot, you must set the border width, and the color to transparent.

Nativescript does not support shadows: NativeScript/NativeScript#550. This is important for material design, https://github.com/bradmartin/nativescript-cardview and https://github.com/Especializa/nativescript-ng-shadow. These do have limitations such as a border may not work in conjuction with the shadow, so you may need another view wrapping side the one you want the drop shadow to have. There is also a blur library: https://github.com/davecoffin/nativescript-blur but on Android only images can be blured.