How to Use iOS Large Titles

In this tutorial, you will learn how to create a large collapsible animated title on iOS — a native platform effect introduced in iOS 11.

If you prefer a video tutorial, here's one for you:

Introduction

When iOS 11 came out, some of the apps that come with iOS had this large animated title that's part of the collapsible action bar.

This feature isn't yet supported out-of-the-box in NativeScript, but luckily, we can use JavaScript to control the native iOS APIs and thus get our large titles on. We'll do exactly this in this NativeScript tutorial.

Adding a Large Title in a NativeScript iOS App

We'll start off with the usual starter app:

First add a loaded="onLoaded" event to the page.

<!-- main-page.xml -->

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" loaded="onLoaded">
  <Page.actionBar>
    <ActionBar title="My App" icon="" class="action-bar">
    </ActionBar>
  </Page.actionBar>
  
  <StackLayout class="p-20">
    <Label text="Tap the button" class="h1 text-center"/>
    <Button text="TAP" tap="{{ onTap }} class="btn btn-primary btn-active"/>
    <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
  </StackLayout>
</Page>

In the page's code file, we implement the onLoaded handler.

// main-page.ts

import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { HelloWorldModel } from "./main-view-model";
import { isIOS } from "tns-core-modules/platform";

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
  const page = <Page>args.object;
  page.bindingContext = new HelloWorldModel();
}

export function onLoaded(args: EventData) {
  const page = <Page>args.object;
  
  if (isIOS) {
    page.frame.ios.controller.navigationBar.prefersLargeTitles = true;
  }
}

We first ensure that the code to enable large titles only runs on iOS with isIOS to prevent it from crashing on Android.

You might be wondering why we didn't enable the large title in navigatingTo. Here, the Page object would have no frame, therefore running page.frame would return null. We can get a reference to a Frame only for a frame that has already been loaded in the visual tree.

We then grab the Navigation Bar and set its navigationBar property to true.

Voila! We have a large title:

With the above code, we also get the collapsing effect on the title. Let's add a ScrollView to the page to test this out.

<!-- main-page.xml -->

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" loaded="onLoaded">
  <Page.actionBar>
    <ActionBar title="My App" icon="" class="action-bar">
    </ActionBar>
  </Page.actionBar>
  
  <ScrollView>
    <StackLayout class="p-20" height="1000">
      <Label text="Tap the button" class="h1 text-center"/>
      <Button text="TAP" tap="{{ onTap }} class="btn btn-primary btn-active"/>
      <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>
  </ScrollView>
</Page>

We give the almost empty ScrollView some height so that we are able to scroll.

On scrolling, you can see the title expand and collapse.

And that's it! With a single line of code, we've added a large title that collapses and expands on scrolling, with a nice smooth animation to boot.

We hope you've enjoyed this short tutorial. We are creating a series of iOS-focused NativeScript tutorials, so look out for those. Here are some of the posts in the series. We'll be adding to the collection in the coming weeks.

• How to Add SHADOWS in iOS
• How to Use iOS Large Titles
• How to Create iOS Podcast Cover Art Animation with Inheriting Shadow Color
• How to Use iOS Collapsing SearchBar
• Translucent Tabs in iOS

Let me know what you thought of this tutorial on Twitter: @digitalix or leave a comment down below. You can also send me your NativeScript related questions that I can answer in video form. If I select your question to make a video answer, I'll send you swag. Use the #iScriptNative hashtag.

For more tutorials on NativeScript, check out our courses on NativeScripting.com. We have a NativeScript Hands-On UI course that covers NativeScript user interface, views and components. You might also be interested in the following two courses on styling NativeScript applications: Styling NativeScript Core Applications and Styling NativeScript with Angular Applications.

Did you enjoy this? Share it!