Swipe Container Dissapears

[Ericky]

I have one single button setup for the swipe right now which when clicked, opens up a 'mailto://' view. When I close that view, the swipe container dissapears completely, I can't see it anymore at all. No swipe button, and even if I put 'backgroundColor="orange"' on the '.invite-view' element, nothing shows up still when swipping.

 

<GridLayout *ngIf="allContacts.length" dock="bottom" rows="*">
      <RadListView scrollPosition="Top" backgroundColor="transparent" (itemLoading)="onItemLoading($event)" #allContactsView [items]="allContacts" class="contacts__list"
        selectionBehavior="None" swipeActions="true" (itemSwipeProgressChanged)="onCellSwiping($event)" (itemSwipeProgressStarted)="onSwipeCellStarted($event)">
        <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemHeight="100"></ListViewLinearLayout>
        <ng-template tkListItemTemplate let-item="item">
          <GridLayout class="contact-container" columns="*">
            <ink-list-user [user]="item" showLetter="true"></ink-list-user>
          </GridLayout>
        </ng-template>

        <GridLayout *tkListItemSwipeTemplate columns="auto">
          <StackLayout id="invite-view" class="invite-button">
            <StackLayout orientation="horizontal" horizontalAlignment="center">
              <Label class="btn" text="Invite" verticalAlignment="center" (tap)="inviteContact($event)"></Label>
            </StackLayout>
          </StackLayout>
        </GridLayout>
      </RadListView>
    </GridLayout>

 

inviteContact(args) {
  const OpenUrl = require('nativescript-openurl');
  const index = this.allContacts.indexOf(args.object.bindingContext);
  const contact = this.allContacts[index];

  OpenUrl(`mailto:${contact.email}?subject=Hey ${contact.firstName} check this out!&body=I think you would like this new app for managing your business cards.`);
}

onSwipeCellStarted(args: ListViewEventData) {
  const swipeLimits = args.data.swipeLimits;
  const mainView = args['mainView'];

  let left = mainView.getMeasuredWidth() * SWIPE_LIMIT_PERCENT;
  let right = 1;

  // Swiping direction is inverted in iOS compared to android
  if (isIOS) {
    right = left;
    left = 1;
  }

  if (args.object.bindingContext.isConnection) {
    right = 1;
    left = 1;
  }

  swipeLimits.left = left;
  swipeLimits.right = right;
  swipeLimits.threshold = mainView.getMeasuredWidth() * SWIPE_LIMIT_PERCENT / 2;
}

onCellSwiping(args: ListViewEventData) {
  const mainView = args['mainView'];
  const rightItem = args['swipeView'].getViewById('invite-view');

  if (args.data.x <= 0) {
    const rightDimensions = View.measureChild(
      <View>mainView,
      rightItem,
      layout.makeMeasureSpec(Math.abs(args.data.x), layout.EXACTLY),
      layout.makeMeasureSpec(mainView.getMeasuredHeight() - CONTACT_PADDING, layout.EXACTLY));

    View.layoutChild(<View>mainView, rightItem,
      mainView.getMeasuredWidth() - rightDimensions.measuredWidth,
      0,
      mainView.getMeasuredWidth(),
      rightDimensions.measuredHeight
    );
  }
}

[Nick Iliev]

Hello Ericky,

I can confirm that the described scenario is an issue with the current version of nativescript-telerik0ui plugin.
The good news is that this bug is already addressed and included in our next release (which is expected roughly at the end of the month). Meanwhile, you can test the fix in your application by applying the next version in your project.
E.g.

rm -rf node_modules platforms hooks
tns plugin remove nativescript-telerik-ui-pro
tns plugin add nativescript-telerik-ui-pro@next
tns run android

If your terminal does not support rm, then delete the folders manually.

Note: We have noticed that you are using the plugin nativescript-openurl which was deprecated some time ago. I would recommend using the built-in openURL method from the NativeScript modules instead of the deprecated plugin.
E.g.

import { openUrl } from "utils/utils";

openUrl("your-link-here");

The usage is the same as in the plugin you are using, but this module is up to date with all the latest changes. More about all that you can use from "utils/utils" module can be found here.

Regards,
Nikolay Iliev
Progress Telerik

[Ericky]

Hello Nikolay,

 

Thank you very much for the information.