Back to Blog Home
← all posts

Harness the power of CollectionView (Part 3) - Dynamic layout changes

July 16, 2023 — by Nathan Walker

This is Part 3 in a series highlighting CollectionView, a super powered list control with recycled rows providing you best of class on each platform suited to fit all sorts of needs.

👉 Demo Repo

Continuing onward with dynamic layout changes let's look at providing versatility to display layouts of the collection.

colWidth and rowHeight are your friends

CollectionView supports colWidth and rowHeight properties allowing you to switch up your layouts anytime.

<CollectionView colWidth="50%" rowHeight="30%" />

These properties can be a percentage string or a number with a fixed size like 100 (for precisely 100 dip in height for each row).

These settings would provide a 2 column layout where each column takes up 50% of the available control width and each row takes up 30% of the CollectionView area itself for both iOS and Android. Really powerful options through such simplicity!

For example, let's say we want a 3 column layout where each column takes up 33.33% (about a 1/3) of control space and each row takes up about 18% of the height:

<CollectionView colWidth="33.33%" rowHeight="18%" />

Dynamic layout changes

If we want to dynamically change the layout by way of a user interface toggle switch we can data bind these properties:

<CollectionView colWidth="{{ colWidth }}" rowHeight="{{ rowHeight }}" />

Provided a Button which changes these bindings with something like this:

<Button text="Change Layout" tap="{{ changeLayout }}" />
function changeLayout() {
  colWidth = '100%';
  rowHeight = 100;

Using whichever flavor you're comfortable with for binding syntax (Angular, React, Solid, Svelte or Vue), this would change the layout of your CollectionView.

However you might notice something strange where the layout doesn't fully update on each dynamic update:

Ensuring dynamic layout updates properly

CollectionView provides a refresh method which can sometimes correct layout issues of this sort. However where it does not, we can apply a nice tip to cause the layout to properly measure using the visibility mode available on all NativeScript controls.

function changeLayout() {
  colWidth = '100%';
  rowHeight = 100;
  collectionView.visibility = CoreTypes.Visibility.collapse;
  setTimeout(() => {
    collectionView.visibility = CoreTypes.Visibility.visible;
  }, 1);

This is a nifty tip that will simply cause a layout pass on the next JavaScript tick (learn more: event loop%2C one important,we call it a tick.)

Because NativeScript conveniently operates just like the natural platform on the UI thread this achieves exactly what we it's lightning fast and synchrounous!

We will look at "Pull to refresh and infinite loading" next!

About nStudio

Founded in 2016 by open source collaborators, nStudio is recognized for establishing a healthy open source governance model to serve the global communities interest around NativeScript. If you are in need of professional assistance on your project, nStudio offers services spanning multiple disciplines and can be reached at [email protected].