There are various ways to hide and show view elements on the screen at any given time either dynamically or just per page.
visibility: 'hidden' | 'collapse' | 'visible'
hidden: boolean(new in 8.x+)
Both are very similar but have subtle differences that are worth noting.
From various frontend framework flavors
Most frontend framework integrations add their own sugar in the form of
v-if (Vue) and
ngIf (Angular) to name a few which are also very useful but have unique characteristics that are important to understand.
Most expensive view operation
Direct visual tree manipulation is the most expensive operation you can do generally speaking. More specifically creating new visual nodes, inserting into the tree and removing nodes is expensive. When done on a single render pass (showing a page) or when a user taps a button to see a visual changes is not a big deal. But when done repeatedly in the moment of what a user would expect to be smooth (like scrolling) it can be devastatingly bad. This is because doing so often forces the rendering engine to have to remeasure and adjust the layout which is often visibly janky and not desirable. This is not NativeScript related but rather pure rendering engine on each platform related. It's also a topic that has been talked about at depth with regards to Web DOM performance. Even though NativeScript views are not using the DOM, the same practices apply with regards to achieving optimal view rendering performance.
What occurs with
These types of bindings completely destroy a view node when hiding and recreate it when showing. This is perfect for many uses cases but should be avoided on anything that involves scrolling which would cause those bindings to change mid-flight during scroll behavior. Or really any other highly interactive user experience which causes binding changes.
On the other hand,
visibility both do not destroy the view node. They simply modify it's properties to hide it or show it. The key differences between the two are illustrated here in this sample:
The difference in their usage is very subtle:
visibility: 'hidden' | 'collapse' | 'visible';
We can see
visibility supports 3 modes where
hidden is a boolean which acts just like
visibility: 'collapse' would. So why would you ever use
hidden? It's much simpler binding
[visibility]="condition ? 'visible' : 'collapse'" so purely syntactical sugar. But it's important to note that
hidden: false and
visibility: 'collapse' both affect the layout whereas
visibility: 'hidden' does not!
visibility: 'hidden' can be superb for various performance dialing cases on recycled rows which you don't want to cause a layout change (bad performance) while a user is scrolling.
v-if and the variants don't fit the performance case you are working with,
visibility will and they can often be the key to unlocking the performance you are after in those situations.