Dynamic Titles

📘

By default the Navigation Bar will display the App Name in Text mode. Define rules to display other titles in the Navigation Bar on specific pages or groups of pages. Dynamic Titles can also be set at run time via the JavaScript Bridge.

Overview

Configure the text that shows in the Top Navigation Bar either at build time through your app configuration or at run time through the JavaScript Bridge.

iOS NavigationBar example

App Configuration (appConfig.json)

You may specify titles for each URL in your app using regular expressions in the Dynamic Titles options within the Native Top Navigation Bar section of the app builder. Alternatively, you may specify titles for each URL directly in the JSON.

For a given regex if showImage is set to true the top navigation bar image will be shown in the top nav bar. Otherwise the title text will be displayed.

Regex matches are prioritized from top to bottom. If no match is found, your app name will be shown. An example JSON formatting for BooyaFitness.com is provided below:

[
    {
        "regex": "https://www.booyafitness.com/",
        "showImage": true
    },
    {
        "regex": "https://www.booyafitness.com/dashboard",
        "title": "Dashboard"
    },
    {
        "regex": "https://www.booyafitness.com/edit",
        "title": "Account"
    },
    {
        "regex": "https://www.booyafitness.com/password/new",
        "title": "Recover Password"
    },
    {
        "regex": "https://www.booyafitness.com/workouts/browse",
        "title": "Workouts"
    },
    {
        "regex": "https://www.booyafitness.com/partners/browse",
        "title": "Partners"
    },
    {
        "regex": "https://www.booyafitness.com/pricing",
        "title": "Pricing"
    },
    {
        "regex": "https://www.booyafitness.com/workouts/.+",
        "urlRegex": "https://www.booyafitness.com/workouts/(.+)"
    },
    {
        "regex": "https://www.booyafitness.com/partners/.+",
        "urlRegex": "https://www.booyafitness.com/partners/(.+)"
    },
    {
        "regex": "https://www.booyafitness.com/videos/.+",
        "urlChompWords": 1,
        "urlRegex": "https://www.booyafitness.com/videos/([A-Za-z0-9-]+)"
    }
]

Learn more about Regular Expressions

A default navigation title can be defined in the app configuration that is then overwritten dynamically as required. Or alternatively, the configuration can be left blank and all titles set by the website.

JavaScript Bridge

️GoNative JavaScript Bridge

Create your navigation title structure, and then run the gonative.navigationTitles.set() Javascript Bridge function to set the values. To set the example navigation title run the following:

var menuItems = {
    active: true,
    titles: [{
      showImage: true
      regex: '/home'
   },{
      title: 'my title',
      regex: '.*'
   }]
}
gonative.navigationTitles.set{
  'persist':true,
  'data': menuItems});

Setting persist=true will save the navigation titles for use the next time the app is launched, otherwise, it will only take effect for the current session.

To revert the navigation titles to the configuration set at build time, run the following command:

if (navigator.userAgent.indexOf('gonative') > -1) {
    gonative.navigationTitles.set{('persist':true});
}

For a one-off setting of the current page's title, URL encode the desired title and run the following command:

if (navigator.userAgent.indexOf('gonative') > -1) {
    gonative.navigationTitles.setCurrent({'title':'Hello%20World'})
}
<a onclick="gonative.navigationTitles.setCurrent({'title':'Hello%20World'})">Set Current Page's Title</a>