Questions regarding Tab navigation
See original GitHub issueI 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:
- 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. - 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, aSpecials
scene, aProfile
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 anavigate()
to a separate scene, that also has a copy of the tabs, and useNavigator
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 ]
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (5 by maintainers)
Good news. In
navigation-react-native
v6.1.0, I’ve added aTabBar
component that works on Android and iOS.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 WIPViewPager
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:
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.