question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Questions regarding Tab navigation

See original GitHub issue

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 ]

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
grahammendickcommented, Oct 6, 2019

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

0reactions
arunmenon1975commented, Oct 7, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tab navigation - React Navigation
Possibly the most common style of navigation in mobile apps is tab-based navigation. This can be tabs on the bottom of the screen...
Read more >
Best Practice for Tab Placement on Widget?
What is the best practice for tab placement on a widget? Which would provide for a better user experience? navigation · tabs ·...
Read more >
how to show initial routes when click on each tab using react ...
We start on the HomeScreen and navigate to DetailsScreen. Then we use the tab bar to switch to the SettingsScreen and navigate to ......
Read more >
Open a modal from a tab bar · Issue #27 - GitHub
Document best practice for opening a modal via tab bar (like instagram) react-navigation/react-navigation#3003.
Read more >
React Native Top Tab Navigator - GeeksforGeeks
Example: First, we will add our App.js file which will hold the Material Bottom Tab Navigator logic. Along with the basic information regarding...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found