Nativescript: Navigation with topmost() inside TabView (keep tabs on internal page)

[leocaseiro]

UPDATE: please vote here https://nativescript.ideas.aha.io/ideas/NS-I-138

Stack Overflow

Stack Overflow question here

Tell us about the problem

I'd like to navigate to an internal Page on itemTap event , but I want to keep the Tabs on the bottom even while navigating to an internal Page(same way native App Store app or Facebook App works).

Which platform(s) does your issue occur on?

iOS (I believe happens to Android too, I haven't tested yet)

Please provide the following version numbers that your issue occurs with:

• NativeScript 2.0.0
  

  Please tell us how to recreate the issue in as much detail as possible.

Any TabView with internal page:

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

_tabs.xml_

<Page xmlns:customTab="tabs">
    <TabView>
        <TabView.items>
            <TabViewItem title="Contacts">
                <TabViewItem.view>
                    <customTab:contacts />
                </TabViewItem.view>
            </TabViewItem>
        </TabView.items>
    </TabView>
</Page>

_tabs/contacts.xml_

<GridLayout loaded="onContactsLoaded">
   <ListView itemTap="onContactTap"> ... </ListView>
</GridLayout>

_tabs/contacts.js_

exports.onContactTap = function (args) {
    var itemIndex = args.index;
    var list = pageData.get('Contacts');
    console.log('>> list.itemIndex', JSON.stringify(list[itemIndex]));

    frameModule.topmost().navigate({
        moduleName: 'tabs/contact',
        context: list[itemIndex]
    });
}

Update with contact.xml an contact.js

_contact.xml_

<Page loaded="onInit" navigatedTo="onNavigatedTo">
    <StackLayout>
        <Label text="{{name}}" />
    </StackLayout>
</Page>

_contact.js_

var page;
var pageData = new Observable();

exports.onNavigatedTo = function(args) {
    page = args.object;
    var dataItem = page.navigationContext;
    page.bindingContext = dataItem;
}

exports.onInit = function(args) {
    page = args.object;
    page.bindingContext = pageData;
}

[aksharpatel47]

In iOS there is a property of the viewController called hidesBottomBarWhenPushed. Try setting this to false in the contact detail page that is hiding the bottom bar.

[leocaseiro]

Hi @aksharpatel47, thank you for your replied.

I'm not sure how to change viewController.

Would be something like that?

function onNavigatedTo(args) {
    page = args.object;

    if (page.ios) {
        page._ios.hidesBottomBarWhenPushed = false;
    }
}

[NickIliev]

Hello @leocaseiro

I have noticed that the code that loads the detailed page (tabs/contact) after an itemTap is not present.
(As far as I see there is a _contacts.xml_ and _contact.xml_ ). I am only guessing here but is your _contact.xml_ page created with page element? If so you can re-create the whole UI logic with implementing the tabView again.

I hope that will be useful for your project - If you need further assistance please provide the code behind tabs/contact.xml

[leocaseiro]

Hi @NickIliev,

I appreciate your help as well.

I'm new in this and I'm not sure how to re-create the UI. I do have a element, but if that's the issue, I'm happy to get rid of it.

Could you please show me an example? I'm trying hard here :smile:

Thanks a lot!

[leocaseiro]

PS: I Updated with the missing code...

[NickIliev]

@leocaseiro

You have two files contacts.xml and contact.xml with pretty much similar names which is a bit confusing to read - at first I recommend that you use more readable convention for example you can rename your file like detailed-contact.xml
That way when you click in your listView from contacts.xml you will navigate to detailed-contact.xml
After tapping on contact-item from contacts.xml you are in fact loading a totally different page with no tabView in its UI. So all you have to do now is to recreate the tabView logic you have already used in tabs.xml + adding a tab for the detailed-contact
_For example:_

tabs.xml

<Page xmlns:customTab="tabs">
    <TabView>
        <TabView.items>
            <TabViewItem title="Contacts">
                <TabViewItem.view>
                    <customTab:contacts />
                </TabViewItem.view>
            </TabViewItem>
        </TabView.items>
        <!-- all the other tab-items follows here.. -->
    </TabView>
</Page>

contacts.xml

<GridLayout loaded="onContactsLoaded">
   <ListView itemTap="onContactTap"> ... </ListView>
</GridLayout>

contacts.js

exports.onContactTap = function (args) {
    var itemIndex = args.index;
    var list = pageData.get('Contacts');
    console.log('>> list.itemIndex', JSON.stringify(list[itemIndex]));

    frameModule.topmost().navigate({
        moduleName: 'tabs/detailed-contact',
        context: list[itemIndex]
    });
}

detailed-contact.xml

<Page xmlns:customTab="tabs">
    <TabView>
        <TabView.items>
            <TabViewItem title="Contacts">
                <TabViewItem.view>
                        <StackLayout>
                            <Label text="{{name}}" />
                        </StackLayout>
                </TabViewItem.view>
            </TabViewItem>
        </TabView.items>
        <!-- the other tab-items follows here.. -->
    </TabView>
</Page>

Basically you have to recreate your tab-View UI as you are navigation to a totally different page which can't "know" about the tab-view from contacts.xml
Of course you can once again use the custom components to tidy up your code and avoid making a large tab-view xml page.

[leocaseiro]

Hi @NickIliev,

First of all, thanks for your suggestion about fileNames. They are not really that way, I just posted here with example purpose...

I have done that way before and I didn't like the result. The transiction bring all the tabs again and, honestly that is not friendly...

Actually, if you check App Store app or Facebook App, you'll see, the tabs stay locked on the screen and the transition happens only inside the TabView.

The result I have bring all tabs again, check it out: http://recordit.co/jCZbfjXc0h

However, I recorded myself on App Store. Check that seems the TabView on AppStore is a iframe-ish.

App Store: http://recordit.co/2YgcxaF0Nf

Do you think is possible to create a iframe or something more similar to this behaviour?

[NickIliev]

@leocaseiro

I understand what you are trying to accomplish - however there are some platform limitations on nested frames i as discused here https://github.com/NativeScript/NativeScript/issues/1043 but you can also find a bit hacky solution for iOS.

For android you can do it by the following code (however due to some limitations discused in the link above theere might be some side effects when nesting with multiple tabViews) Note that this solution wont work for iOS.

You can use in your page.xml

<TabViewItem>
    <TabViewItem.view>
        <Frame id="myFrame" />
    </TabViewItem.view>
</TabViewItem>

in your tabView and then in your page.ts

export function onLoaded(args: EventData) {
    var page = <Page>args.object;
    mainFrame = <Frame>(<Page>args.object).getViewById("myFrame");
    setTimeout(function () {
        mainFrame.navigate("sub-page");
     }, 2000);
}

[leocaseiro]

Thanks again @NickIliev.

I was hoping there was a simpler way. I honestly thought that Tabs would work as frame by default, as 90% of apps with tabs work that way.

I've tried include <Frame /> inside <TabViewItem.View>, but I'm keeping getting error 11:
_Service exited due to signal: Segmentation fault: 11_

I'll keep this on standby at the moment. I'll back that when I have more knowledge on NativeScript.

Thanks for all your big help.

[leocaseiro]

Hi @NickIliev, I', not sure why this Issue is closed if I still having the same issue.

I've been more than two months playing with NativeScript, I'm still trying to achieve this frame or inside a tab, or inside a RadSideDrawer.

The AppStore app and facebook app have an iframe working as IOS Native. I'd like to keep this issue open, so perhaps, someone with more knowledge in this type of use case could help us to implement it.

Is that possible?

I'll investigate more in deep this week, and I believe if the issue were open, we'd have more help here.

Thanks

[NickIliev]

Hey @leocaseiro
I have closed this as this is virtually the same problem discussed at https://github.com/NativeScript/NativeScript/issues/1043

To avoid duplicated issues please use the initial issue to track the idea, give suggestions and continue the discussion.Your issue is also referred there so the information is not lost in any way.

[leocaseiro]

Ok, no problem.
Thank you for your feedback.

[leocaseiro]

Please vote here: https://nativescript.ideas.aha.io/ideas/NS-I-138

[andreasotto]

I follow all these discussions too. I don't understand for what Tabs are there, if they are one-way-roads and you can not even load another view afterwards without leaving the page environment.
Like @leocaseiro already stated this should be the default behavior. At least there should be a solution to this after all the time or some hints into the correct directions. It does not help to direct users to some other websites for some kind of voting. I think this is the right place for not only the discussion but the decision, too.
There is a lot of discussion to avoid hamburger menus (Side Drawers), the logical consequence is to use a tabbed navigation. This is not only recommended for iOS for a long time but for Android since this year, too. But the way it is currently implemented doesn't help.
This also has been discussed on the slack channel several times without solution.
Let's try to understand what the problem is; eventually someone will be able to contribute then.

See also:

• https://groups.google.com/forum/#!topic/nativescript/fDx3I1Hjfso
• http://stackoverflow.com/questions/37177239/nativescript-navigation-inside-tabview

[NathanaelA]

Actually there is a solution, my nativescript-dynamicLoader plugin handles this senario very well:

You can download the sample APK that you see in the image below from https://appprotection.net/examples.htm and you can look at the source code for the app here: https://github.com/NathanaelA/nativescript-dynamicloader

Everything in the Blue is dynamically loaded, none of that is part of the static main page.

[tobydeh]

I'm facing the same problem, its a common ui scenario to keep the bottom tab bar whilst navigating.

Im not keen on implementing the tabs in every view as @NickIliev suggested.

I looked at the other thread discussing multiple frames but I'm not sure how it relates?

[antoinebrault]

Not only is it common, it's has a spec in material design: https://material.google.com/components/bottom-navigation.html

Behavior

Tapping on a bottom navigation icon takes you directly to the associated view, or refreshes the currently active view.
Each bottom navigation icon must lead to a destination, and may not open menus or other pop-ups.
On Android, the Back button does not navigate between bottom navigation bar views.

[tobydeh]

@NickIliev I'm still trying to find a solution that allows me to keep the tab bar at the bottom and navigate within the tab view. I have used your nested Frame example which works but I cannot style the Nested frame's action bar to use the backgroundSpanUnderStatusBar property. It only seems to work for the outermost Frame element. Is there a way to hide the outermost frames action bar and style the sub frames action bar with backgroundSpanUnderStatusBar?

Is there another solution or hack I could use instead of a nested frame like placing the TabView outside of the Page's Frame?

[tobydeh]

@leocaseiro I found a solution and created an example: https://github.com/tobydeh/nativescript-tab-navigation-example

[leocaseiro]

Hi @tobydeh, thanks for sharing that. It seems pretty nice.

The only small issue is that on tab click, it resets the history. So if I'm in the second page of a tab and click in another tab, I'll loose the second page which is not exactly what I want. (Especially if I have a form populated and click in another tab before save...)

However, it's a good start.

Thanks

[tobydeh]

@leocaseiro I've set clearHistory to true when changing tab on line 87 of tab-navigation.js in the example. It would be a simple change to use one frame per tab and maintain the history between tab changes.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.