Search code examples
nativescripttabviewnativescript-angularrouter-outlet

Nativescript - Android TabView back button custom navigation


In an Nativescript application I need to implement a custom navigation scenario for Android when user click on material/soft back button.

For simplicity, starting with login-tabs template (https://github.com/ADjenkov/login-tabs-ng) and I want implement a navigation like Instagram, Facebook, WhatsApp, Pinterest, and many more ...

That's with the example of login-tabs template, when I navigate from the Players tab to the Teams tab and then I tap the back button I want to return to the Players tab (on the page I left in this tab).

Today as the navigation history of the Teams tab outlet is empty and the navigation history of the root outlet is empty, the application is closes. I wish it was close if I tap on the back button after returning to the Players tab and if navigation history of Players tab is empty.

I hope it's clear, tell me if it's not the case. Is there a way to implement this behavior?


Solution

  • Finally I implemented a solution that's inspired by the response of @Manoj.

    I listen to the activityBackPressed event and set args.cancel = true for prevent default behavior.

    At each Tab change I save the Tab previously visited. Then at every activityBackPressed event I check if the current outlet can go back or not with this.routerExtension.canGoBack({ outlets: [this.tabVisibleName], relativeTo: this.activeRoute }).

    If not I return to the previous tab programmatically if the list of tabs visited is not empty. If the list of tabs visited is empty I set args.cancel = false for exit the app.

    If this.routerExtension.canGoBack({ outlets: [this.tabVisibleName], relativeTo: this.activeRoute }) return true I simply go back : this.routerExtension.back({ outlets: [this.tabVisibleName], relativeTo: this.activeRoute });

    Note : you must remove listener when application is going to background, otherwise you will have several listeners (one by resume) :

    application.on(application.exitEvent, (args) => {
                if (args.android) {
                    application.android.off(application.AndroidApplication.activityBackPressedEvent);
                }
            });
    

    Thanks for your help