Questions regarding Tab navigation

[arunmenon1975]

I had a question regarding tabbed navigation. My app has bottom tabs as the primary navigation artefact. I reached this decision after reading through the Apples Human Interface guidelines and Google's Material guidelines. It was a sort of healthy compromise to have tabs as the primary navigation method since both sort of agreed on it and, importantly, could be achieved via React Native(RN) without too much of a hassle.

I imagined i could use RN's own TabBarIOS for IoS and, since RN doesn't ship with an Android variant, i could use ViewPager similar to the Twitter example in this repo. This gave me (after due compromises) native interfaces across both the OSs for a viable tabbed primary navigation experience in my app.

I however started off with a JS-only simple tab implemented that looked and worked almost exactly as the basic native counterparts. This is obviously cross-platform but unfortunately non-native but i am ok with that since i do get the benefit of substantially fewer lines of code and exact replication across both platforms.

Eg. of this approach: Welcome is the landing scene and is non-tabbed. Any links from this scene will lead to my primary app with the tabs being displayed at the bottom. The first tab, maybe titled Menu, may have secondary navigation to sub-views under it(I am currently considering SegmentedControl for my secondary navigation, again due to finding a compromise between both the platforms). A second tab could be Specials with similar sub-views. A third could be Profile etc etc to a max of about 5. Navigating between these tabs are simple redux-driven or context-aware functionalities using this JS-only tab implementation. I am always in this scene from Navigator's point of view throughout the user's journey in my map, except perhaps for the odd modal or something similar i might open up here and there.

While starting out with this approach, a couple of issues/doubts - not related to Navigation React Native(NRN) - surfaced:

• I think i may not be using the NRN library optimally. With this approach, I would end up on one scene that would hold my tabbed interface(since it will be omnipresent throughout the users engagement with the app, in accordance with the guidelines) and then on i would only be manipulating React component views in place of actually navigating via a navigate(), though the user would hardly be aware of it if animations are stifled.

• TabBarIOS has been spun off RN as part of the lean-core effort. While the documentation is still available on the site as of today, RN v0.59.10 doesn't have it. There are no 'official' alternatives intimated as yet. This throws a large spanner into my original plans.

I was just wondering:

1. if you are considering the missing TabBarIoS and planning on updating the example. This might help me get cues on how to proceed as well. Or do you have any suggestions for a replacement approach.
2. This may sound quite stupid but is an actual question i have, but would having individual scenes for each tab be an ok approach(though i may have to disable animations so that it appears like actual tab navigation). Eg i will have a Menu scene, a Specials scene, a Profile scene etc where i use passed props to make the bottom tab be activated/deactivated as necessary when they are called via taps on relevant tabs. In other words when i tap on a tab, instead of using redux/context/whatever that i use now, i do a navigate() to a separate scene, that also has a copy of the tabs, and use Navigator methods (or redux etc) to highlight/unhighlight.[ A copy is a wrong word since i could just have an import, but im just drawing analogies with a web app here where, instead of in-DOM changes via JS, it can appear like calling a separate page with duplicate code ]

[grahammendick]

The TabBarIOS component is already part of the Navigation router as you can see in the Twitter example.

My preference is to use the native platform as much as possible. So I'm always going to recommend the TabBarIOS component because that uses the underlying native UITabBarController on iOS.

[arunmenon1975]

Ok, thats a big miss on my part. I got it now. I thought TabBarIOS was being imported from React Native but a custom TabBarIOS is shipped with Navigation and imported from it. The similar names got me down the wrong lane.

Thank you. I really think i wouldn't have caught that in 9 on 10 attempts especially since i haven't developed that may RN apps yet to be fully familiar.

This resolves my questions since the deprecation in React Native was what got me started with the doubts and the need for an optimal alternative approach. I am preferring the native approach as well for this app, to the extent possible.

[grahammendick]

No problem. Thanks for asking. Always happy to help

[grahammendick]

Good news. In navigation-react-native v6.1.0, I've added a TabBar component that works on Android and iOS.

[arunmenon1975]

Thank you for the update. This is a very important update, at least for me. It also makes the Navigation router easier to integrate since most people invariably end up with some form of tabs in their native app solutions and having it pre-integrated makes development faster as well as possibly reduced external dependencies (which may come with their own quirks).

A TabBar was on top of my todo PRs since it is a primary requirement in my current app. I have a WIP ViewPager version going similar to the Twitter example but with the new updates in 6.0 and comments that you were considering building it 'soonish' i knew that this Viewpager version would be undergoing changes so left it as is in a 'just about working' state.

I considered having a go at a tab solution myself - a bare-basic version - but had 2 obstacles:

• unexpected spotty internet connectivity over the last few weeks and actually, of late, almost no internet connectivity. I am in touch with my ISP for resolution but do not as yet have firm dates for having it fixed. Internet connectivity was more for initial research before getting into it headlong.
• as mentioned above, my limited experience in building native modules so there is a learning curve to be negotiated.

Please note i still have a few ideas - almost all pertinent to my app - that might be useful to have shipped along with the library. I will send PRs for consideration sometime in the future. This might take a short while since i definitely need reliable (or even almost reliable) internet connectivity before i take the plunge.