Enable large title displays for iOS Navigation

You can enable large titles on iOS Navigation by adjusting the Frame using standard iOS APIs.

iOS prefersLargeTitles

You can interact directly with the target platform using it's natural APIs. The property which defines this behavior is documented here in the Apple docs.

As we can see from the docs, this is a property of a UINavigationBar which is accessible from it's most commonly used owner, a UINavigationController, which is what a @nativescript/core Frame is on iOS.

Accessing the Frame

The Frame is always accessible from the Page.

On iOS, each Page is a UIViewController instance and has a reference it it's parent UINavigationController via it's frame property.

Depending on flavor usage, this may be implicit or explicitly defined. Let's look at a few examples.

With Angular

The Page is implicit with Angular in that each page routed to always gets a Page injected into it. Every Page has a frame property which is a reference to it's Frame instance. Since a Page is not loaded when a component is constructed we can setup a loaded listener to access the frame at a time it becomes available.

@Component({
  selector: 'ns-items',
  templateUrl: './items.component.html',
})
export class ItemsComponent {
  page = inject(Page);

  constructor() {
    // Setup large titles on iOS
    this.page.on('loaded', (args) => {
      if (__IOS__) {
        const navigationController: UINavigationController =
          this.page.frame.ios.controller;
        navigationController.navigationBar.prefersLargeTitles = true;
      }
    });
  }
}

With Vue

The Page is explicit in Vue in that you define each template with a Page whereby the first component in your navigation stack will define the Frame explicitly.

<script lang="ts" setup>

function loadedFrame(args) {
  if (__IOS__) {
    const frame = args.object as Frame;
    const navigationController: UINavigationController = frame.ios.controller;
    navigationController.navigationBar.prefersLargeTitles = true;
  }
}
</script>

<template>
  <Frame @loaded="loadedFrame">
    <Page>
      <ActionBar title="Home"> </ActionBar>

      <GridLayout></GridLayout
    </Page>
  </Frame>
</template>

For other flavors

Each flavor is built on the exact same constructs so where you can access the Page, you can get a frame and/or where you have an explicit Frame you can interact with it's UINavigationController as seen the exact same way.

StackBlitz examples you can run right now

• NativeScript iOS Large Titles with Navigation with Angular: https://stackblitz.com/edit/nativescript-ios-large-titles-angular
• NativeScript iOS Large Titles with Navigation with Vue: https://stackblitz.com/edit/nativescript-ios-large-titles-vue