I was able to achieve it by doing this, however, I'm not sure if this is the proper way of doing this, so guidance is appreciated:

// onLoaded (args):
var page = args.object;
var Frame = require('ui/frame').Frame;
var ViewModule = require('ui/core/view');
var routeFrame = new Frame();
// This view is an empty GridView tag on my current page
var nestedFrameContainer = ViewModule.getViewById(page, "frame");
nestedFrameContainer.addChild(routeFrame);
routeFrame.navigate('mySubPage');

One thing I noticed is that inside this nested frame, the pages inside have a gap at the top of the frame. I'm thinking that this gap is the gap that shows to account for the status bar? Is there a way to hide this? This shows on iOS.

In order to counteract the top gap, I simply applied a negative top margin to the page.

Hi @rclai,

our documentation incorrectly states that nested Frames are supported. This is not the case. Frame cannot be nested inside another frame due to platform limitations. Even more Frame is not designed to be created from XML.

What scenario you want to cover with nested frames?

It's odd that it is not supported because I somehow made it work, as I showed above. It works on iOS, but probably not for Android it seems.

I'm trying to create a fixed element at the bottom that doesn't move when you navigate to a different page at the top. And no, a tabbed view is not what I'm looking for.

I work with @rclai.. The scenario would be to show tabs on the bottom or "now playing" like on spotify -- screenshot below. The bottom bar is expected to stay still as pages navigate.. also some pages may want to hide the bottom bar.
For a large app TabView couldn't work because there are way more pages than there would be tabs.

My apologies for filling your screen with kanye west

@craig-l So if I understand correctly you want to have root TabView with 1 tabItem which hosts Frame so that the bottom (e.g. tabView) stays visible always but pages inside the tabItem are navigated with transition, right?

Yes, that is correct.

@hshristov do you know any thoughts of how this can be done?

@rclai Sorry for the late response. I was actually surprised that it works. We are using UINavigationController as native view for our Frame class so once you add the new Frame to the layout its _nativeView (e.g. uiViewController.view) is added to the layout _nativeView. But the UIViewController is not added anywhere. So I guess this could be a potential problem.
Other than that it seems there is some issue with the way Frame is layout-ing its content. I will investigate it and will write back once I find out the problem.

@rclai I've modified the Frame and Page layout in order to support nested Frames. So as far as layout goes #1126 will fix it for iOS.
But we have to change the current implementation in order to support it for Android too. Is iOS good enough for you for the moment?

That's fine for now.

In addition, one thing to discuss is that because I've navigated using the nested frame, the topmost() frame will become the nested frame, so in order for me to navigate using the parent frame, I would have to do frameModule.stack()[0]. And once I've navigated using the parent frame, the topmost() frame is now the parent frame.

In addition, because there are nested frames, the history will need to be managed on a per frame basis.

The history for iOS is managed per frame. For android it is also per frame but there is a hardware button which will revert the last transaction. In your case with nested frames I guess that won't be a problem but in case there are sibling frames - it could cause an issue if you manually call goBack on a frame that which transaction was recorded in the activity but there are transaction after that.

As for the frame.topmost() - don't use it. Ever view have a page property and page have a frame property which is the frame hosting the page.

I'm still not sure if we should support this case or if we should have light-weight navigation frame which ignores page actionBar.

So how can an android bottom bar be implemented while being able to transition to different "screens" without it disappearing or reloading?

What do you mean with android bottom bar?

Since multiple frames breaks Android, how can I create a fixed bottom bar that stays there when I navigate?

As I said - we need to change the current implementation in android in order to support this scenario. For the moment I cannot think of good workaround.

Hi @rclai and @hshristov, I'm very interested in implement multiple frames in my app. Is there any example code how do implement that?

I'm trying to follow your example code. I can see my frame, but not it's content.

My xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo"  style="background-color:gray">
  <StackLayout>
    <StackLayout>
      <Label text="Tap the button" class="title"/>
      <Button text="TAP" tap="{{ onTap }}" />
      <Label text="{{ message }}" class="message" textWrap="true"/>
    </StackLayout>

    <StackLayout>
      <Frame>
        <Page style="background-color:blue">
          <StackLayout>
            <Label text="Label inside Frame"/>
          </StackLayout>
        </Page>
      </Frame>
    </StackLayout>
  </StackLayout>
</Page>

What I have

Thanks in advance.

I've stopped using nativescript so I can't really help anymore.

Hi @rclai, thanks for your reply. Did you find another solution that works with Frame? Would you mind sharing with me?
Thanks

I've moved on to React Native, which allows me to do this functionality. However, I don't think you'll like that because you're an Angular guy.

Hi @rclai, thank you for your feedback.
Well, I wouldn't mind trying out React Native. There's also a lib to implement angular + react native.

Sorry @enchev, is it fixed? I'm still trying to get the #2094 which was closed in regards this issue.

Any news about it?

Won't be implemented it?

Hey @leocaseiro,

You are right! This is still not possible - I closed it accidentally.

Hi!

I just stumbled upon this, and I was wondering: is there any plans to implement this feature? I would also need the ability to navigate between pages while keeping a tab bar available at all times.

I don't really follow {N} anymore but okay.

+1

Working example here: https://github.com/tobydeh/nativescript-tab-navigation-example

I like using Nativescript, but I feel like this is a serious omission. None of the solutions provided work with Nativescript + Angular (correct me if I'm wrong). You can do it with angular using outlets, but you lose all animations and it leaves the app feeling unpolished. . If anyone has any workarounds or suggestions, I'm all ears.

@jessebacon
Try this https://www.nativescript.org/blog/using-nested-router-outlets-with-nativescript-and-angular

@leocaseiro Thank you! I have tried it. It works but you lose the animation. I guess I could always try to add my own.

@jessebacon, you're right. I'm sorry, I can't help with that one.

@jessebacon did you happen to figure out the animation part of this? Like was said above, without animation it does feel unpolished for this almost default navigation experience now days.

@joeizy I played around a little with it by adding CSS animations, etc. It feels like a lot of hassle and it takes a bit to get it to look "native" - it's not a positive experience.

@jessebacon my feelings as well :(

Oh, no. Why i'm reading this thread after spending a lot of time to learn {N}. This is what I planned to use.

@webleaf what were you planning to use? It is a bit unclear...

FYI: In the upcoming release, we are planning on releasing a feature for supporting multiple frames

@NickIliev I need fixed bottom bar with smooth animations/transitions inside frame, while bottom bar stay not animated.
I think it's very popular layout to organize app pages.
Such fixed bottom bar could contain fast accessible links to some app sections. And own navigation with own transitions inside such section.
And it could be nice if this bottom bar could be styled like half transparently, for example.
And it also have to be compatible with SideDrawer (using both in the same app layout).

@webleaf Also iOS Toolbars: https://developer.apple.com/ios/human-interface-guidelines/bars/toolbars/

@pana-cc Toolbar it's like context menu (difference between Toolbar and Tab bar described by your link). So it could be implemented using DockLayout. But i'm talking about something like Tab bar, but with own navigation inside each tab, and possibility using other pages except tabs.

@webleaf Ah, I see. That's having root Tab with frames inside tab items? So some of the tabs can have their own navigation. The Tab however is stationary everywhere.

@pana-cc yes, something like this, but also with pages that don't have bottom Tab bar.

@NickIliev Is this feature exclusive to native javascript or does it include angular as well? Thanks in advance!

@tsonevn / @NickIliev There seems to be a few feature requests about ActionBar / Multiple Frames etc., not closed yet. Closing the completed feature request may help to understand what is still pending.

@webleaf So at the moment, we can't create pages without tabView, using tabView in our app? For example login page without tabView. Any solution for this?

@andreypelykh There are no restrictions as such, but you would usually use a Frame as parent for a page. Frame is the top level component that manages your navigation.

@andreypelykh this issue not actual anymore. @rclai, I think it can be closed.
Since NS4 support multiple frames. You can paste Frame anywhere. Tabview with bottom menu can be easily implemented using DockLayout, for example. And it can be hidden using css visibility property, when you want.

Closing this one as the support for multiple frames is official

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.