Navigation is an important core aspect of any application. Improper navigation can easily break your app. Which is why it is very important to do it right. In this post I’m going to share the tips and tricks which I’ve learned so far, if you know any, apart from those mentioned here, let me know in the comments section below.

1. Manage all routes from 1 file

Instead of always typing out the path to a route manually in every .navigate() call, it is a good idea to separate out the path into a separate file. That way, when some path changes in your project, you will only have to change the path in 1 file. To do this, create a file called routes.json inside the app/shared folder in your project. Put all your routes in this file. And it would look something like this,

{
    "home": "./pages/home/home",
    ‎"list": "./pages/list/list",
    ‎"itemDetails": "./pages/list/item-details/item-details"
} 

Remember that it is a json, so don’t forget the quotes. (if you don’t want to use json file, you can module.export this json from a js file as well)

Now you can easily require this file anywhere in your project by doing

const routes = require("~/shared/routes.json");

And replace all the hard coded route paths with routes.<route_name>

2. Time to stop using frameModule.topmost().navigate()

There is no need to require frameModule to perform navigation anymore. Every page variable has a frame variable in it. And you can use that to perform navigation.

Let’s see how that would work during a button click,

const routes = require("~/shared/routes.json");
exports.buttonTapped(args) {
   const page = args.object.page; // Yes! args.object.page is a thing. 
   ‎page.frame.navigate(routes.home);
} 

^ special thanks to Hristo from NativeScript team. I learnt that trick from him.

3. Perform navigation without adding to backstack

When you navigate if you set backstackVisible: false, that navigation won’t be added to the backstack

   ‎page.frame.navigate({
         moduleName: routes.someModal, 
         ‎backstackVisible: false
   });

So, let’s say there is Page A, B and C

We’re now in page A. We navigate to page B, by setting backstackVisible to false. Next we navigate to C, (with/without setting backstackVisible) Now that we are in C, if we press the back button, We will be taken to page A.

This is because page B was not added to back stack.

4. Disable iOS back button and swipe gesture when you navigate

Hiding the back button requires getting an instance of the UIViewController’s navigation item, and invoking the setHidesBackButtonAnimated method. This can be done in the loaded event of the page to which you navigated to.

  const controller = frameModule.topmost().ios.controller;

  // get the view controller navigation item
  const navigationItem = controller.visibleViewController.navigationItem;

  // hide back button
  navigationItem.setHidesBackButtonAnimated(true, false);

  // Disable swipe gesture to go back
  page.enabeSwipeBackNavigation = false;

5. Give navigation the highest priority when possible

You might not know this, but you can continue to write some code below your navigation call, and it continues to execute. You might think, why would I want to do that. The answer is performance. If you have some code that has nothing to do with the navigation, then it is wise to run it after the navigation call. (You’ll understand this one better when you see the playground app)

Here’s a Playground app that I made to show all the above tips & tricks:

https://play.nativescript.org/?template=play-js&id=Hhiggq&v=7

Hungry for more? Go through the docs if you haven’t already =>

https://docs.nativescript.org/core-concepts/navigation

For Angular Navigation =>

https://docs.nativescript.org/core-concepts/angular-navigation

Cheers! Happy NativeScripting :)