Onsen React with Tabs and Navigator on Android

[Guest]

Hey all. I’m having a problem getting a Tab based app rendering the way I’d like when all of the tabs use Navigators and Toolbars when rendering on Android.

I’d like the Toolbar to be above the tabs, but when rendering for Android, the Tabs are above the Toolbar.

Looks a little funny to my eye that way. Is there a relatively easy to coerce the tab bar to sit below the toolbar for this?

Thanks,

Scott

[misterjunio]

@sherscher but you want the toolbar to be there for every tab, right? So in your code you should put it outside the tabbar, seems like you’re adding it in every tab page.

[Fran Diox]

@sherscher I just updated the tutorial, have a look at it :)

[Guest]

@misterjunio Actually, there is a different toolbar is associated with each tab, that’s why there’s a toolbar for every tab. There’s also a separate navigator for every tab too. I just want the toolbar to be above the tabs, not below.

[Guest]

@Fran-Diox Took a look. Thanks! Problem is, I have a navigator (and toolbar) associated with each tab. So I cannot easily have one toolbar, unless there’s a way of managing it all that I’m missing.

[Fran Diox]

@sherscher That’s a complex pattern. Animation-wise I don’t know what you are expecting. Do you want to always show the tabbar even after pushing a new page inside one of the tabs? In that case, the toolbar is over the tabbar so it cannot be visually animated…
Otherwise, if you want to hide the tabbar after pushing a new page, then the Navigator should be the parent of the tabbar, not a child.

To change the toolbar in every tab you can do as in the tutorial, but instead of simply changing the title you can render a complete different toolbar.

[Guest]

@Fran-Diox Yea, I tried that at first. It got really complicated to render a single toolbar based on what tab was selected and what route was associated with the navigator for that tab.

The basic idea is that each tab has content that can be individually navigated. In other words, if I push a page when tab 1 is selected, it shouldn’t affect anything about tab 2. And if I select tab 2, and then go back to tab 1, the toolbar and navigator should be in the same state as when I left it. Seems like a pretty common navigation pattern in tabbed apps.

It looks and works perfectly on iOS, because the tabbar is at the bottom. I’d prefer to have the tabbar be on top for Android, as that is what is expected on that platform. Might not be able to do it though. Oh well.

[Fran Diox]

@sherscher I understand what you want to make, but I don’t know what sort of animation you are expecting because there are some issues with this pattern. On iOS, the tabbar is at the bottom so when you push a new page inside a tab, the tabbar remains static and everything else transitions into a new page. That’s probably fine and not very ugly.

However, in Material Design, the tabbar is in the middle between the toolbar and the content. What kind of animation are you expecting if you want to keep the tabbar static but change the content and the toolbar? I haven’t found an example in Android where something like this happens. If there is a tabbar and something else is pushed, it usually covers the whole page.

It would be possible to only animate the page content if you put the toolbar in the parent (as is shown in the tutorial). Then, instead of only using the tab index, you can listen for page’s show events and change the toolbar accordingly. But still, I’m not sure if this pattern is appropriate for an Android app :neutral_face:

[Guest]

@Fran-Diox Think you’re right. I’ll just park the tab bar at the bottom on Android. Little strange, but probably not as strange as what I was originally envisioning. Thanks for the help!