CODEWITHSUNDEEP
nativescripttabviewnativescript-angularrouter-outlet
jeba
jeba

Reputation: 95

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?

Upvotes: 0

Views: 744

Answers (2)

jeba
jeba

Reputation: 95

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

Upvotes: 1

Narendra
Narendra

Reputation: 4574

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; }

Upvotes: 0

Related Questions