When using orientation="horizontal" items do not render unless they completely fit the columns

[asciidiego]

Which platform(s) does your issue occur on?

• iOS/Android/Both - iOS
• iOS/Android versions - iOS 14
• emulator or device. What type of device?
  ATM I have only tried it on emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)
  7.0.9-rc.0 (to make it work with iOS 14, with the new JS runtime).
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/@nativescript/core/package.json file in your project)
  6.5.10
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
  6.5.2
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)
  This plugin -> 2.0.36

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

Simply create a collection view with items and a button to push items to the items array.

When the orientation is vertical, it works as expected, adding items interactively and you can see how each one gets added.

When the orientation is horizontal, it only shows the item on screen if they complete a whole column. For example, say we have a CollectionView with N columns and 2 rows. If I have initially 2 items, and then I add one, nothing happens. But if I add yet another one (4 items in total now), a new column pops-up and now we have 2 columns. The issue is that when I added a single item, I expect to have 3 items in total and that the collection view renders them as follows:

old_item_1 | new_item_1 (this one is in memory, but is not rendered) 
old_item_2 | [NO_ITEM_HERE_YET]

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

---

This MVC Code is based on a whole private monorepo, but I can publish the excerpt of the component that I am building.

// horizontal-scroller.component.ts
import { Component, OnInit } from '@angular/core';
import { EventData } from '@nativescript/core';

import { BaseComponent } from '@sagrada-familia/core';

@Component({
  moduleId: module.id,
  selector: 'sf-horizontal-scroller',
  templateUrl: './horizontal-scroller.component.html',
})
export class HorizontalScrollerComponent extends BaseComponent
  implements OnInit {
  items = [];
  constructor() {
    super();
  }

  ngOnInit(): void {
    const aux = new Array(1).fill(0);
    this.items.push(...aux);
  }

  addItems(): void {
    this.items.push(0);
  }

  onScrollerLoad($event: EventData): void {
    console.dir($event);
  }
}

<!-- horizontal-scroller.component.html -->
<StackLayout>
  <GridLayout rows="*" height="128">
    <CollectionView
      row="0"
      [items]="items"
      rowHeight="64"
      colWidth="30%"
      orientation="horizontal"
      (loaded)="onScrollerLoad($event)"
    >
      <ng-template let-item="item" let-odd="odd">
        <StackLayout backgroundColor="red" class="m-4">
          <Label [text]="'HOLA'" class="debug"></Label>
        </StackLayout>
      </ng-template>
    </CollectionView>
  </GridLayout>
  <button text="add items" (tap)="addItems()"></button>
</StackLayout>=

---

VIDEOS SHOWING THE ISSUES

I uploaded a video to show the issue on v2.0.36, Angular v.8.+, {N} v.6+. Along with the orientation="vertical" counter-example where one can see how with that setting it works properly.

Video that shows how it works with vertical orientation.
Video that shows how it SEEMS TO ME that it does not work with horizontal orientation.

Notice how in the second video I have to tap TWICE for the new items to appear.

Link to videos: https://imgur.com/a/F0w0x3S

[asciidiego]

Update. It works as expected on Android.