How do I create a bottom tabview with internal history per tab?


#1

We have a performance bottleneck in our main view.
Our designer wants a bottom tab-view with individual history per tab, sort of like what Instagram have in their app.

The built-in tab-view places the tabs, at the top on android and at the bottom on iOS, and doesn’t have individual history.

Do you know of a way to implement this with nativescript-angular for both iOS and Android?

Our current solution uses a DockLayout to put the GridLayout with the tabs at the bottom and a service to manage states and history for the tabs.
Performance is extremely poor, feels more like very slow web than native UI. Rendering hangs on tab switches.

We’ve looked at https://www.npmjs.com/package/nativescript-bottomnavigation but it lacks an iOS implementation and doesn’t have individual tab history. I also don’t know how to use it with Angular.


#2

Hi @m_abs, what type of performance bottlenecks are your experiencing?
The TabViews in Instagram are loaded the first time you visit them, while NativeScript loads all tabs at once (except images inside each tabView, those are loaded when the view first is shown).

Could you describe a bit more this “individual history per tab” feature, what do you mean by that?

Have you seen this topic regarding bottom/top tab-bars?
http://forum.nativescript.org/t/android-tabview-to-look-like-ios/215


#3

Hi @manijak,

In our implementation the tabs are created with a DockLayout and tab content is loaded via __*ngIf__s, when we switch between tabs the old component is removed and replaced with the new component. The problem is that the UI hangs, when switching tabs and since the components are removed state is lost most notably scroll position.

I’ll try to explain what I mean by individual history, be example:

If you do this in Instagram on Android (I assume iOS behaves the same).

  1. Start the App, you’re now on the “Home”-tab.
  2. Open the “Search”-tab
  3. Scroll down and open a image.
  4. Open the “home”-tab again.
  5. Scroll down on the “Home”-tab.
  6. Open the “Search”-tab again. You’re now back at the “image” you opened before.
  7. Click “back”, You’re still on the “search” tab but back at the scroll offset you were before you opened the “image”.
  8. Click on “Home”, you’re now at the scroll offset you were before you opened “search”.

I hope that explains it.

I guess we could try patching the tabview, like they suggest in that post and still manage the history with our service, would probably perform better.


#4

I have same problem. I try to put custom tab component at the end of main component under but it didn’t work. Then I change to and tab-view worked and I could change main view with tapping on tabs but without handling page state (like instagram).What can I do for making tab-view like instagram?


#5

Hi @m_abs , I’m wondering did you finally manage to store individual histories for tabs? We have the same requirement from our designer. I’ve tried angular’s lazy loaded modules but NativeScript seems to store the whole routing history in one stack.


#6

Unfortunately, no.

I’ve been told nativescript 4 should have support for multiple frames, but I don’t know if it will solve the problem.


#7

Internally Android uses a GridLayout to place tabs at top and content right below. You may modify that order programatically in TabView’s loaded event.


#8

I’m using different named router outlets for each GridLayout based tab, but the problem is when the user switches tab and it should have its own unique routing stack. I think I will try a custom service for handling navigation.