search

timomeh / react-native-material-bottom-navigation

💅🔧👌 a beautiful, customizable and easy-to-use material design bottom navigation for react-native
MIT License
709 stars 127 forks source link

How can i implement Fixed Bottom Navigation to 4 Tabs? #14

Closed dwicao closed 7 years ago

dwicao commented 7 years ago

AFAIK, Fixed Bottom Navigation only support up to 3 tabs. Can I implement Fixed Bottom Navigation to 4 tabs?

timomeh commented 7 years ago

If you use more than 3 Tabs, you should use the Shifting Layout. The Guidelines say »If there are four or five actions, display inactive views as icons only«. That's why it automatically switches to Shifting.

I don't want to actively support features which are against the Material Guidelines.

timomeh commented 7 years ago

@dwicao @LordOfBones I published v0.5.0 which has an option to manually turn on/off shifting mode. I struggled a while in which way I should follow the Material Guidelines.

I decided to add this specific option since there aren't many shifting bottom navigations in the wild, so it's still kinda exotic. Also the shifting bottom navigation could be an anti pattern for example for navigation bars with 4 tabs and short labels. In this case the shifting mode is kinda unnecessary.

It's a boolean prop called shifting on the <BottomNavigation /> Component.