Nativescript - Android TabView back button custom navigation

Question

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?

You have to listen to the activityBackPressed event and set args.cancel = true when user is on Teams tab (by verifying selectedIndex on TabView) then navigate by url to Players tab. — Manoj
– Manoj, Commented Jan 22, 2019 at 13:55
Hi @Manoj, thx for for your quick reply. Actually for this simple case it works, but in case there are more than 2 tabs, how do I know in which tab was the user before? in other words, is there a "global" browsing history or do I have to store this manually every first time user come on a tab? — jeba
– jeba, Commented Jan 22, 2019 at 14:26
@Manoj to complete : navigating to the Players tab by url, I lose the current navigation history of the Players tab. If the user was on the details of a player he will return to the list of players instead of arriving on the page on which he was — jeba
– jeba, Commented Jan 22, 2019 at 14:33

jeba · Accepted Answer · 2019-01-23 10:27:26Z

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

Narendra · Accepted Answer · 2019-01-23 05:37:48Z

0

You need to save selected Tab in your data.service and when user go back to tabs.component.html you can use the selectedIndex. You can skip to listen to activityBackPressed as well in that case.

in your tabs.component.html

<TabView (selectedIndexChanged)="onSelectedIndexChanged($event)" [(ngModel)]="selectedTabIndex" width="100%">

and in your tabs.component.ts constructor( private routerExtension: RouterExtensions, private activeRoute: ActivatedRoute, private _dataService: DataService ) { this.selectedTabIndex = this._dataService.selectedTabIndex; } and

onSelectedIndexChanged(args: SelectedIndexChangedEventData) { const tabView = <TabView>args.object; const selectedTabViewItem = tabView.items[args.newIndex]; this._dataService.selectedTabIndex = args.newIndex; }

answered Jan 23, 2019 at 5:37

Narendra

4,5842 gold badges24 silver badges40 bronze badges

1 Comment

jeba Over a year ago

It may work, but I have implemented another solution that I describe below. Thx for your help

Collectives™ on Stack Overflow

Nativescript - Android TabView back button custom navigation

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related