search

timomeh / react-native-material-bottom-navigation

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

Some Tabs icon and label disappear when tab array is more than 8 #121

Open Akash-T2S opened 5 years ago

Akash-T2S commented 5 years ago

What kind of Issue is this?

Bug Report
Question / Problem Problem Discussion / Feature Request

Actual behavior

Expected behavior

Environment

software version
react-native-material-bottom-navigation
react-native or expo
node
npm or yarn
Akash-T2S commented 5 years ago

What kind of Issue is this?

Bug Report Question / Problem Problem - question Discussion / Feature Request

Actual behavior

  • What is happening?
  • Is it happening on Android, iOS or both?
  • Could you identify sections in your code which triggers this behavior?

Expected behavior

  • What did you expect to happen? expect all 8 tab icon and label fit in that bottomNavigation screen

Additional resources

  • Provide a way to reproduce the issue. The best way is to re-create the bug using Snack.
  • Add Code Snippets which cause your issue.
  • Add a screenshot if it helps to show your issue.

Environment

software version react-native-material-bottom-navigation
react-native or expo
node
npm or yarn

sangeethkumarv commented 5 years ago

I had the same problem when numbers of tabs are more than 6, it does not fit into the screen. Should have the scrollable tab behavior. Is there any solution for this?

Basically, we will need scrollview when a number of tabs didn't fit into the screen.

timomeh commented 5 years ago

First of all, I have to notice @Akash-T2S that you didn't fill out the issue template. Please replace the placeholder bullet-points with your answers.

I want to refer you to the material guidelines (https://material.io/design/components/bottom-navigation.html#behavior) which state:

Don’t use more than five destinations [meaning: tabs inside the bottom navigation]. For those cases, try tabs or a navigation drawer.

Bottom navigation bar destinations have fixed positions. They don’t scroll or move horizontally.

I would advise you to follow those guidelines. These guidelines were written to make your UIs better. Breaking them will cause bad user experience.

However, if someone opens a PR which adds a horizontal scrollview into the BottomNavigation, I will take a look at it.