Nativescript scroll to horizontal offset

Question

I have a horizontal scroll view with a list it items, I want the current item (determined by it's index) to be the first viewable item in the list.

I am using scrollToHorizontalOffset and passing in the math of what the offset should be, but it is not putting the current item as the first visible.

everything logs, but both of these log as undefined :

    this.scrollLayout.scrollToHorizontalOffset(200, true);```



```   `<ScrollView orientation="horizontal" #scrollView (loaded)="bindScrollView()">
        <FlexboxLayout alignItems="flex-start">
          <StackLayout
           *ngFor="let item of data; let i = index"
        [class.disabled]="item.disabled || (firstDisabledIndex !== null && i > firstDisabledIndex)"
        [class.background-dark]="currentItem === item"
        [class.background-standard]="currentItem !== item"
        style="border-radius: 10%; margin-top: 10; margin-right: 10; padding: 15"
        (tap)="onCardClick(item)"
      >
        <Label [class.text-light]="currentItem === item" [text]="item.title" fontSize="20" fontWeight="bold"></Label>
        <StackLayout class="white-circle" [class.text-dark]="currentItem === item">
          <Label [text]="item.numberVal || i + 1" fontSize="18" fontWeight="bold"></Label>
        </StackLayout>
        <Label *ngIf="item.canProceed" class="dot"></Label>
        <Label *ngIf="!item.canProceed" class="dotplaceholder"></Label>
      </StackLayout>
    </FlexboxLayout>
  </ScrollView>````


```    `@ViewChild('scrollView', { static: false }) scrollViewRef!: ElementRef<ScrollView>;
  // @ViewChild('scrollView') scrollViewRef!: ElementRef; // for left and right scroll
  // @ViewChild('scrollView', { static: false }) scrollViewLayout!: ScrollView;
  // @ViewChild('cardContainer', { static: false }) cardContainer!: ElementRef;
  // page!: Page;
  scrollLayout!: ScrollView;
  // contentContainer!: StackLayout;
  // numLabels = 50;

  // ngAfterViewInit() {
    // console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!NumberStepperComponent', this.data);
    // this.scrollToIndex(this.currentItem);
    // this.scrollToId(this.currentItem);
    // )
    //  this.scrollToCurrentItem(this.currentItem);
  // }

  bindScrollView() {
    this.scrollLayout = <ScrollView>this.scrollViewRef.nativeElement;
    console.log('bindScrollView', this.scrollLayout);
    if (this.currentItem) {
      console.log('CURRENTITEMS');
      this.scrollToCurrentItem(this.currentItem);
    }
  }

  scrollToCurrentItem(currentItem: CardInputs) {
    const cardIndex = this.data.indexOf(currentItem);
    console.log('cardIndex', cardIndex);

    // Assuming each item has a fixed width, you can adjust this value based on your layout
    const itemWidth = 150; // Adjust this value based on your layout

    const scrollPosition = cardIndex * itemWidth;

    console.log('scrollPosition', cardIndex, itemWidth, scrollPosition);
    console.log('VARIABLESET', this.scrollLayout);
    console.log('SCROLLABLEWIDTH', this.scrollLayout.scrollableWidth);
    console.log('SETOFFSET', this.scrollLayout.scrollToHorizontalOffset(200, false));
    this.scrollLayout.scrollToHorizontalOffset(scrollPosition, true);

    // this.cardContainer.scrollLeft = scrollPosition;
    // console.log('DOTHEMATHDOE', this.scrollLayout.scrollToHorizontalOffset(scrollPosition, false));
    // Set the scroll position
    // this.scrollViewRef.nativeElement.scrollToHorizontalOffset(scrollPosition, false);
  }````

Answer 1

The answer was to use setTimeout before calling

this.scrollViewRef.nativeElement.scrollToHorizontalOffset(scrollPosition, false);