test: add repro for rendering issue

[rigor789]

[farfromrefug]

@diegovincent what is your issue?

[asciidiego]

@farfromrefug I deleted the comment because I seemed to make it work today (more specifically on the ui-collectionview v.2+ version of the plugin). Nonetheless, I am still investigating because I cannot find out what exactly was failing in the more than 30 tests that I did yesterday... ^^''

Before I dig deeper in the rabbit hole for nothing, enabling paging on the ui-collectionview is possible right?

[farfromrefug]

@diegovincent no it is not right now. I can be implemented but not done yet.

[asciidiego]

Thank you for your quick responses!

@farfromrefug Hmmm... okay, and more specifically, simply changing the layout to a horizontal one? My purpose is to have a virtualized horizontal list (imagine a ListView, but horizontally, where I need to load items in an optimized manner) on both Android and iOS. And maybe I naively thought that I could simply access the native APIs to change the layout types?

[farfromrefug]

@diegovincent yes it support horizontal layout. You can look at the demo apps

[asciidiego]

@farfromrefug what are the major changes between v2.+ and v3|v4+? I would like to submit a PR for the documentation that would serve my team as well, but I suppose that if the APIs of the plugin differ between v2 and v3/v4, I cannot do it?

Or maybe I can do it on a branch and then you can do a git cherrypick to release 2.0.37 which is only a docs update?

Basically documenting these cases in the README.md, the horizontal scroll worked, can you confirm to me that the view is optimized (as in virtualized and not rendering all the items at the same time?). Thank you so much!

I will leave this comments here, or maybe we should put them in the Wiki or something in case somebody else in the future has the same doubts :D

[asciidiego]

@farfromrefug When setting the orientation="horizontal" the items are only rendered when they completely fit in each column, or more technically, when modulo(items.length, numberOfRows) = 0 a.k.a. items.length % numberOfRows === 0.

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.

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

---

MVC Code

// 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>=

[farfromrefug]

@diegovincent try and use rowHeight and columnWidth. Btw for discussion please use slack.

[asciidiego]

@diegovincent try and use rowHeight and columnWidth. Btw for discussion please use slack.

colWidth does not work? Thanks! Which channel specifically?

I figured this could be annoying, and I apologize! would have chatted on Slack or created an issue but I do not see the tab.

[farfromrefug]

@diegovincent indeeed created the issues section! Now i dont really get your issue. It seems to work as expected in the video

[asciidiego]

@farfromrefug moved to #3

P.S. Is this the Slack channel? https://nativescriptcommunity.slack.com/?redir=%2Fmessages%2Fgeneral%2F