Nativescript FormattedString - tap event on a Span

Question

I have the following markup:

<StackLayout paddingLeft="15" paddingRight="15" dock="top" >
  <Label textWrap="true">
    <Label.formattedText>
      <FormattedString>
        <FormattedString.spans>
          <Span text="By checking 'yes' I understand that this is a legally valid and binding written agreement, and I indicate that I have read, understand, and agree to the terms of my " />
          <Span text="Agreement. " foregroundColor="#3aba90" tap="viewAgreemnent" />
          <Span text="Also, by checking 'yes', I certify that I have read and agree to accept electronically the "  />
          <Span text="Privacy Policy." foregroundColor="#3aba90" tap="viewPolicy" />
        </FormattedString.spans>
      </FormattedString>
    </Label.formattedText>
  </Label>
</StackLayout>

This creates one text block with Agreement and Privacy Policy rendered in a different color. The goal is when the user taps them to execute a function displaying the agreement or the policy. The problem is that the tap event does not fire for the Spans. Is this event even available at this level or only on the top Label level?

Any ideas on how to accomplish this?

Thanks.

Answer 1

Span elements in NativeScript have no touch events, as you can read in the api documentation: https://docs.nativescript.org/api-reference/classes/_ui_text_base_span_.span

There is however a pull request to implement such a feature: https://github.com/NativeScript/NativeScript/pull/8256

A workaround (note: I'm using nativescript-vue) for the meantime would be something like the following. While, obviously, far less than ideal, it will yield the desired result:

<FlexboxLayout flexWrap="wrap">
    <Label text="I " />
    <Label text="accept " />
    <Label text="the " />
    <Label text="Terms of Service" textDecoration="underline" @tap="open('https://example.com')" />
    <Label text=" and " />
    <Label text="the " />
    <Label text="Privacy Policy" textDecoration="underline" @tap="open('https://example.com')" />
    <Label text="." />
</FlexboxLayout>

Here is the open() function to open the provided URLs in the browser:

import * as utils from "tns-core-modules/utils/utils";

open(url) {
  utils.openUrl(url);
}

---

Update June 2020:

Span elements now support the linkTapEvent. You can read the test to see how it is used. Unfortunately, I was unable to build a Playground Demo, yet.