Use BottomNavigationView instead of top tabs for BottomTabs on Android

Currently bottom tabs are hacked on using a TabLayout instead of using the Material BottomNavigationView. There are a few important differences between the two and I will try to demonstrate with the twitter example app and the real work Twitter app on Android.

On Android bottom tab bars should follow the material design spec. They do not use a swipeable fragment pager, but rely on the button to transition between tabs. This may seem small but it shows when you compare the current way this library works with the Official Twitter App:

As you can see they have top tabs embedded within the fragments showing on the bottom. This is how a ton of android apps work.

Furthermore, the sizing is wrong and there is currently no way to get rid of the indicator bar on the tab view in this library.

So in total, the height is different than what a native bottom tab bar should be, there shouldnt be a line indicator by default on bottom tabs and the child views should not be swipeable to allow for their children to have top tab views.

I am willing to work on this, but since its a pretty big change I assume you will have some preferences in how it is implemented. Let me know any feedback you have!

[grahammendick]

Great! I’ve created #341 that implements this basic spec. If you run up the Twitter example and set swipeable to false on the TabBar component then it will render a BottomNavigationView.

I’ve listed all the tasks I can think of in the PR description. Let me know if I’ve missed anything. If you’re interested in working on any of them then create a branch from my PR branch and I’ll merge your work in.

[grahammendick]

Thanks for the code sample. It helped me think through the problem. I’ve got a clearer idea of the solution now. Let me know what you think.

Spec

We’ll add a swipeable prop to the TabBar component. This will default to true so that it’s backward compatible. If it’s false then, instead of rendering a TabLayout, we’ll render a BottomNavigationView. We’ll do this conditional rendering in the javascript. The TabBar component will check the swipeable prop and either render a NVTabLayout or a NVTabNavigation native component. The rest of the TabBar javascript stays the same.

On the native side we’ll create a TabNavigationView that inherits from BottomNavigationView. We don’t want the TabBarView to worry about how the Tabs are rendered so we’ll create a TabView interface. Both the existing TabLayoutView and the new TabNavigationView will implement this interface. The TabBarView will talk to this interface instead of talking directly to the TabLayoutView like it currently does. An example interface method is setupWithViewPager.

The majority of the work will be implementing the TabNavigationView. We can study Android’s TabLayout to point us in the right direction.

If swipeable is set to false then the TabBarView component will disable the swiping functionality of the ViewPager.

We’ll add a hideTabs prop to the TabBar component. If set to true then it won’t render the tabs.