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

[Akash-T2S]

What kind of Issue is this?

Bug Report
Question / Problem Problem 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

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

[Akash-T2S]

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]

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]

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.