FormattedString inside ActionBar new line bug on iOS

Issue Description

I’ve been using FormattedString with multiple spans to output some text in multiple lines/rows but after upgrading to NS 8.x it stopped showing all text after line break (\n) on iOS for all text elements like Label and TextField. It works fine when used with a Button element. Would be great to have the text that is lost due to this bug back. It works as expected with Labels on Android.

I tried adding/removing textWrap="true" and setting a height that exceeds element’s height significantly hoping to see it cropped but it just doesn’t render.

Any help is highly appreciated.

Thank you in advance!

Reproduction

This will not output second span in the view:

<ActionBar class="action-bar">
          <Label textWrap="true">
                  <FormattedString>
                        <Span text="Line 1 of a string \n"></Span>
                        <Span text=" line 2 of the same string"></Span>
                 </FormattedString>
          </Label>
</ActionBar>

However this will work as expected:

<ActionBar class="action-bar">
          <Button>
                  <FormattedString>
                        <Span text="Line 1 of a string \n"></Span>
                        <Span text=" line 2 of the same string"></Span>
                 </FormattedString>
          </Button>
</ActionBar>

Relevant log output (if applicable)

⚠ Update available for component nativescript. Your current version is 8.1.2 and the latest available version is 8.1.4.
✔ Component @nativescript/core has 8.1.5 version and is up to date.
✔ Component @nativescript/ios has 8.1.0 version and is up to date.
✔ Component @nativescript/android has 8.1.1 version and is up to date.

Environment

OS: macOS 12.0.1
CPU: (8) x64 Apple M1
Shell: /bin/zsh
node: 12.19.0
npm: 7.19.1
nativescript: 8.1.2

# android
java: 1.8.0_281
ndk: Not Found
apis: 28, 29, 30
build_tools: 28.0.3, 29.0.2, 30.0.3
system_images: 
  - android-24 | Google Play Intel x86 Atom
  - android-28 | Google Play Intel x86 Atom
  - android-29 | Google APIs Intel x86 Atom
  - android-30 | Google APIs Intel x86 Atom
  - android-30 | Google Play Intel x86 Atom

# ios
xcode: 13.1/13A1030d
cocoapods: 1.10.2
python: 2.7.18
python3: 3.9.1
ruby: 2.7.1
platforms: 
  - DriverKit 21.0.1
  - iOS 15.0
  - macOS 12.0
  - tvOS 15.0
  - watchOS 8.0

Dependencies

"dependencies": {
  "@angular/animations": "^12.0.6",
  "@angular/common": "^12.0.6",
  "@angular/compiler": "^12.0.6",
  "@angular/core": "^12.0.6",
  "@angular/forms": "^12.0.6",
  "@angular/platform-browser": "^12.0.6",
  "@angular/platform-browser-dynamic": "^12.0.6",
  "@angular/router": "^12.0.6",
  "@nativescript-community/universal-links": "^2.0.3",
  "@nativescript/angular": "^12.0.6",
  "@nativescript/appversion": "~2.0.0",
  "@nativescript/background-http": "^5.0.2",
  "@nativescript/camera": "^5.0.2",
  "@nativescript/core": "^8.0.8",
  "@nativescript/email": "^2.0.0",
  "@nativescript/imagepicker": "^1.0.5",
  "@nativescript/iqkeyboardmanager": "^2.0.0",
  "@nativescript/social-share": "^2.0.1",
  "@nativescript/theme": "~3.0.1",
  "crypto-js": "^4.1.1",
  "eslint": "^7.25.0",
  "nativescript-app-environment": "^1.0.0",
  "nativescript-barcodescanner": "~4.1.2",
  "nativescript-mediafilepicker": "^4.0.2",
  "nativescript-phone": "^3.0.1",
  "nativescript-plugin-universal-links": "^1.0.2",
  "nativescript-ui-gauge": "^8.0.0",
  "nativescript-ui-listview": "^9.1.0",
  "nativescript-ui-sidedrawer": "~9.0.0",
  "reflect-metadata": "~0.1.12",
  "rxjs": "^7.3.0",
  "zone.js": "~0.11.4"
},
"devDependencies": {
  "@angular/compiler-cli": "^12.0.6",
  "@nativescript/android": "~8.1.1",
  "@nativescript/ios": "~8.1.0",
  "@nativescript/types": "~8.1.0",
  "@nativescript/webpack": "~5.0.0",
  "@ngtools/webpack": "~12.0.0",
  "codelyzer": "~6.0.0",
  "sass": "~1.39.0",
  "semver": "^7.3.4",
  "typescript": "4.3.5"
}

• I have searched the existing issues as well as StackOverflow and this has not been posted before
• This is a bug report
• I agree to follow this project’s Code of Conduct

[andrewm-mitchells]

Not a NS bug, closing this issue. Thank you everyone who responded!

[jcassidyav]

Maybe a margins/paddding issue ?

<ActionBar >

  <ActionItem icon="res://menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()" ios.position="left"></ActionItem>

  <Label textWrap="true" style="margin-top: 0;margin-bottom: 0; padding-top: 0; padding-bottom:0">
    <FormattedString>
      <Span text="Page title \n" style="font-size:18"></Span>
      <Span text="Page subtitle" style="font-size:10"> </Span>
    </FormattedString>
  </Label>
</ActionBar>

Shows two lines for example.