TabView with Master Detail Navigation Stack


#1

Is there a way to implement tab views with master detail navigation stack in each of the tab? Each tab should have own navigation stack with back button, very much like in Ionic Framework.

I have researched and tried out a lot of examples available and modified them. Seems like it is impossible. Perhaps I’m wrong.

If anyone has done it, can you please give me a direction?

Thank you,
Sem


#2

Again NativeScript is not Cordova / HTML. At least in Android it is not possible by it’s design. If you still want to do something like that, you have to fake the navigation by wrapping each tab content with a view, keep pushing new views (detail page’s content) on top.


#3

Totally agree lots of misconceptions about the differences between Cordova and nativescript.

You can dedicate navigation buttons for each tab by taking advantage binding in visibility property. e.g

<ActionItem tap="onShowDetails1" visibility="{{ firstTapActice ? 'visible' : 'collapsed'  }}"  ios.position="right" android.position="actionBar">
                <ActionItem.actionView>
                <Button text="1st details page" class="action-item"></Button>
                </ActionItem.actionView>
</ActionItem>

<ActionItem tap="onShowDetails2" visibility="{{ secondTapActive ? 'visible' : 'collapsed'  }}"  ios.position="right" android.position="actionBar">
                <ActionItem.actionView>
                <Button text="2nd details page" class="action-item"></Button>
                </ActionItem.actionView>
</ActionItem>

and in the binding context you can change the boolean values of firstTapActice and secondTapActive based on selected tab index.

this one way I could think of. maybe there are other better ways


#4

Thank you for your reply.

Understand that NativeScript is not Cordova/HTML, but in my opinion, master-detail navigation within tab-view is something very commonly found in mobile apps (such as Facebook , Quora etc) today.

Your idea on faking the navigation could work. Let me test that out. I’m kinda newbie at NativeScript and Angular, so thanks for your suggestion.


#5

Do you have a full working example?


#6

Yes, it’s really common and already supported in NativeScript.

WhatsApp / Facebook on Android all has TabView, but they don’t navigate within a Tab. It just opens a new Page / Activity. Navigating within a Tab is supported only in iOS (natively).

If you are using Angular, I think it is much easier to fake navigation using <router-outlet> in each Tab.

But I personally wouldn’t recommend your approach, stick with the native behavior of platform in this case.