[FormattedString] [NS 3.0] iOS crashes when setting Font-Family to Font-Awesome on a Span

[abhayastudios]

Tell us about the problem

iOS crashes when setting Font-Family to Font-Awesome on a Span with Service exited due to Segmentation fault: 11. It worked just fine in NS 2.5 and it also works fine if I change the Font-Family to monospace for example. Other instances where Font-Awesome is used work just fine.

Which platform(s) does your issue occur on?

iOS

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

$ tns info
All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 3.0.1           │ 3.0.1          │ Up to date    │
│ tns-core-modules │ 3.0.0           │ 3.0.0          │ Up to date    │
│ tns-android      │                 │ 3.0.0          │ Not installed │
│ tns-ios          │ 3.0.1           │ 3.0.1          │ Up to date    │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Please see this test project. When you run the project on iOS it crashes on this line.

[tsonevn]

Hi @abhayastudios,
Thank you for the attached sample project,
I reviewed the code and found that the issue is related to the fact that you are adding the icon for the span too early before the fontFamily to be applied.
I was able to reproduce this issue only on the attached application and in my opinion, this problem is related to the specific implementation in it.

For your case, one possible solution is to apply first the fontFamily and to set setTimeout, where you can set the icon with the help of String.fromCharCode. For example:
icon-tabs-bar

private createGrid() {
    this.items.forEach((item,index) => {
      this.tabs[index] = {};
      let tab = this.tabs[index];

      tab.normalCss = `${this.normalCss}`;
      tab.activeCss = `${this.activeCss}`;

      // compose button content composed of icon + text
      let formattedString = new FormattedString();
      let iconSpan = new Span();
      iconSpan.fontFamily=this.iconFontFamily;
      
      setTimeout(()=>{
        iconSpan.text=String.fromCharCode(item.icon);
      }, 1)
      
      
      console.log("icon font");
      console.log(iconSpan.fontFamily);
      iconSpan.fontSize=this.iconSize;

      let textSpan = new Span();
      textSpan.text = item.title;
      textSpan.fontSize = this.fontSize;

      formattedString.spans.push(iconSpan);
      formattedString.spans.push(textSpan);

      tab.button = new Button();
      if (isIOS) {
        //tab.button.ios.numberOfLines = 0;
        tab.button.ios.titleLabel.textAlignment = NSTextAlignmentCenter;
        tab.button.ios.titleLabel.lineBreakMode = NSLineBreakMode.NSLineBreakByWordWrapping;
      }
      tab.button.formattedText = formattedString;

      // set initially active tab
      if (index===this.activeTabIndex) { tab.button.setInlineStyle(tab.activeCss); }
      else { tab.button.setInlineStyle(tab.normalCss); }

      tab.button.on('tap',(event) => {
        this.activeTabIndex = index;
        this.setActiveTabIndex(index); // update tab active/inactive css styles
        // emit event to parent
        this.selectedIndexChanged.emit({
          value: this.items[index],
          selectedIndex: index
        });
      });

      this.tabGrid.nativeElement.addColumn(new ItemSpec(1, GridUnitType.STAR));
      this.tabGrid.nativeElement.addChild(tab.button); // add new tab to grid
      GridLayout.setColumn(tab.button,index); // set new tabs grid position
    });
  }

For your conviniece, I am also attaching my sample project, which I use for testing.
Archive.zip

[abhayastudios]

Thanks @tsonevn for your reply. Indeed your suggestion seems to work. To be honest it feels a little bit like an ugly workaround and I would think it would be worthwhile to understand what is really happening before deciding it is expected behavior, especially since it was working fine in NS2.5.

However, I agree that since it has a reasonable workaround, there are probably more pressing issues to dedicate precious resources to :)

Thanks a lot for your investigation.

Cheers!

[tsonevn]

Hi @abhayastudios, @NathanaelA,
I tested the sample project with the CLI 2.5 and modules 2.5 and indeed the issue is reproducible only with 3.0. In this case, I will log this as a bug and we will investigate further this behavior and what is causing this problem.
For further info, please track the issue.

[racekarl]

Some additional info if it helps:

I have this same issue, but it also occurs when setting the font family directly in the XML, so changing the timing would not help in that case.

The following code worked under 2.5 but crashes my app under 3.0.1:

<Button dock="top" class="login-back" (tap)="backToServerAddress()">
    <FormattedString>
        <Span text="&#xf102;" fontFamily="Icons8" fontSize="18" foregroundColor="#999999"></Span>
        <Span text="Server" foregroundColor="#999999"></Span>
    </FormattedString>

If I remove the custom fontFamily part of the statement the button renders with a "?" as expected. With the fontFamily directive I get the same segmentation fault crash as the OP

[tsonevn]

Hi @racekarl,
Could you give us some sample project or to make the needed changes in the attached one, which will allow us to reproduce this case on our side?
I tested this scenario while declaring fontFamily property from the XML, however, everything seems to work as expected on both iOS and Android.

Thank you in advance for your cooperation.
Archive.zip

[racekarl]

I can also run your sample as expected, but my app still crashes. I tried copying over my custom font file, tsconfig, plugins, style sheets, etc. and it continues to work. I am loathe to upload the source code to my app here. I can work around this issue by specifying the font face in my style sheet so this has pretty low priority at this point.

Thank you for your help.

[PeterStaev]

Seems I've also hit this problem 😢 I've even tried workarounds like using class instead of specifying the style properties but it is still a no go.

@tsonevn take a look at the linked task where you will find a reproducible sample that does not change the font programmatically but enabling/disabling the button and styling the Span through XML and still causes a crash.

[PeterStaev]

I've spent couple of hours tracing the root of this problem (at least for my sample app attached in #4332). And actually there are two problems here:

1. This call is not guaranteed to return a font (source). So in some cases the descriptor and font returned will be null which causes the bad access error, because this is set directly as the font of the NSAttributedText. So this implementation needs to be changed to something like https://stackoverflow.com/a/26222986/3160700.
2. When in a FormattedString you have multiple Spans with different fonts, somehow the Button's native view font ends up being set to the font of the first Span. I wasn't able to pinpoint why, but in the case of my sample app the Button's native view ends up with a font set to FontAwesome instead of the default one. This causes 1. above to happen for the Span that comes after the icon span. If you switch first to have text and then the icon, the app works as expected.

The workaround for my case is to set system as the font family of the FormattedString which ensures the correct font for the Spans .

[EddyVerbruggen]

Same happens to my app. I've patched it locally by guarding these 2 lines with if (nativeView.font !== null) {} without any observable side effects so far.

[hshristov]

@PeterStaev @EddyVerbruggen Hi guys,

could you try with tns-core-modules@next? I tried to reproduce this issue locally using @PeterStaev project but I couldn't with master branch. If you still hit this error please share a simple project that reproduce it so that I can fix it for 3.2.

[EddyVerbruggen]

Hey @hshristov it looks like it's fixed indeed. Perhaps even with (core modules) 3.1.0 as I didn't need to patch my app after updating to that one, but I forgot to mention it here.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.