bottomNavigationOptions.style seems to be required, I don't want that.

I'm doing a small mobile web app and just using normal javascript language, i looking for a long time have not found material bottom navigation javascript plugin , But I want material bottom navigation components and style, so, i hope you can provide a regular version, using normal html/js/css ......

thanks

What kind of Issue is this?

• () Bug Report
• (x) Question / Problem
• () Discussion / Feature Request

How are you using the Bottom Navigation?

• (x) I use the Bottom Navigation together with react-navigation; the Issue is not appearing when I'm using react-navigation's TabBar instead.
• () I use the standalone version.

Related Libraries: (If you use the standalone version together with other libraries, please list them here. If not, delete this line.)

Expected behavior

(how to make the navigation work properly??)

Actual behavior

(The navigation disappears when pressing the button )

Additional description and resources

(I have a navigation menu in it there are several buttons, when I press the button in the navigation menu. as a result my navigation menu disappears, and its label follows the title I have set in staticNavigationOptions. I try position: 'absolute' and flex: 1, the navigation disappears.)

(normal navigation:

)
when i press the menu navigable button:

my code snippet:

What did you do to find a solution?

(I have done a lot of things for this case, I am looking for these solutions in Github and stackoverflow and Docs)

Environment

• React Native versions: (react-native-cli: 2.0.1, react-native: 0.48.4)
• react-native-material-bottom-navigation version: (0.5.2)
• react-navigation version: (1.0.0-beta.11)
• I tested this with: (Android)

Hi,
How to set selected tab background color?
barBackgroundColor="blue" by using this property of Tab, it se background color of whole component. I just want to set only selected Tab Background color.

Hi,

How to use like that? https://github.com/timomeh/react-native-material-bottom-navigation/blob/master/.github/color-4-tab.gif

It would be useful to override the Ripple Color for a specific tab. In a pre-alpha version, this was possible because the Ripple was part of the Tab; but I had to move the Ripple outside of the Tab (so overflow visible works on Android), thus I removed the per-tab Ripple Color Configuration.

A dark ripple is often better with lighter background colors.

Pressing on a Tab while another Tab is animating will cause wrong background colors and weird animations. Pressing another Tab should be blocked while the animation runs.

I'm not well versed in Android phone usage, much less Android development but it seems like I might have found something to allow the OS to apply the proper bottom padding to the view. Would be great if this works out because I'd much rather use your tabs than a drawer for navigation.

https://medium.com/google-developers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec

TLDR - seems like android:fitsSystemWindows=“true” might work.

Hi Team,

Please help me for "onTabChange" not working in this module for below code:

const FooterTabController = TabNavigator(
{
TruckList: { screen: HomeNavigation },
favouriteList: { screen: About },
Loyalty: { screen: Loyalty },
Offer: { screen: Offer }
},
{
tabBarComponent: NavigationComponent,
tabBarPosition: "bottom",
animationEnabled: false,
swipeEnabled: false,

tabBarOptions: {
  bottomNavigationOptions: {
    labelColor: "#686668",
    rippleColor: "#FB9222",
    activeLabelColor: "#FB9222",
    backgroundColor: "white",
    shifting: false,
    onTabChange: newTabIndex =>
      Alert.alert(`New Tab at position ${newTabIndex}`),
    style: {
      height: 56,
      elevation: 8,
      borderTopWidth: 1,
      borderColor: "grey"
    },
    tabs: {
      TruckList: {
        label: "Trucks",
        activeIcon: <Icon1 size={24} color="#FB9222" name="truck" />,
        icon: <Icon1 size={24} color="#686668" name="truck" />
      },
      favouriteList: {
        label: "favourite",
        activeIcon: <Icon1 size={24} color="#FB9222" name="heart" />,
        icon: <Icon1 size={24} color="#686668" name="heart" />
      },
      Loyalty: {
        label: "Loyalty",
        activeIcon: <Icon1 size={24} color="#FB9222" name="qrcode-scan" />,
        icon: <Icon1 size={24} color="#686668" name="qrcode-scan" />
      },
      Offer: {
        label: "Offer",
        activeIcon: <Icon1 size={24} color="#FB9222" name="tag-heart" />,
        icon: <Icon1 size={24} color="#686668" name="tag-heart" />
      }
    }
  }
}

}
);

Please help me. I am newbie in React world.

Thanks

Can you tell me how to show different screens on clicking on tab bar items?

I am following the example you have under Usage for react-navigation, and have run into the error: undefined is not an object (evaluating 'children[activeTab') which is thrown on the componentWillMount in bottomNavigation.js

I have tried to add the activeTab property to the bottomNavigationOptions, but that did not solve the problem. Any ideas?

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

how to disable horizontal scroll for tab menu?

I click on a button, realizing I mistakenly click on click on another and
Instead I wanted to click on the last, then click on the last one.

Tab 1 (activated)
Click on tab 2
And immediately click on tab 3

I get a strange, repetitive effect.

Then, whenever I click on another tab other than tab 3 that was the last selected (then the active one) repeats the odd sequence that occurred at the beginning and end of the new tab that was selected.

Even the text sometimes disappears.

At the moment I'm not using anything, so standalone.

Code:

      <BottomNavigation
        ActiveTab this.state.activeTab = {}
        LabelColor = "white"
        rippleColor = "white"
        backgroundColor = "# 006ACC"
        Style = {height: 56, height: 8, position: 'absolute', left: 0, bottom: 0, right: 0}}
        onTabChange this.handleTabChange = {}
      >
        <Tab
          label = "Home"
          Icon = {<Icon size = {24} color = "white" name = "home" />}
        />
        <Tab
          label = "Music"
          Icon = {<Icon size = {24} color = "white" name = "music-note" />}
        />
        <Tab
          label = "Add"
          Icon = {<Icon size = {24} color = "white" name = "add-box" />}
        />
        <Tab
          label = "Books"
          Icon = {<Icon size = {24} color = "white" name = "book" />}
        />
        <Tab
          label = "Profile"
          Icon = {<Icon size = {24} color = "white" name = "account-circle" />}
        />
      </ BottomNavigation>

Image:
https://i.giphy.com/3o7buaqyj435uZMhig.gif

When the orientation changes, we need to re-measure the icons to display the ripple animations in the correct place.

Cannot change the font size and family of the label Text. Either we need a label style prop or just use labelStyle in react navigation
tabBarOptions: { labelStyle: { fontSize: 12, } }

I use bottom navigation among other things for notifications, which have a "new count" badge.
It would be a nice option to be able to add a new count like this. This should be a string or icon not a number, because for large volume, you want to use "2,5k", "1.1M" etc.

Badges are kind of an implied part of Material Design that are referenced more commonly with Material Design Lite.

E.g.
https://getmdl.io/components/#badges-section

In pictures:
on Profile click, text and style shown but none on other tabs
on clicking the tab twice,the text and style is shown
Have removed the imports and style sheet.
Using react-native-router-flux

App.js:

import React, { Component, PropTypes } from 'react';
import { Router, Scene } from "react-native-router-flux";
class App extends React.Component {
  render() {
    return (
      <Router>
        <Scene key="root" style={{ paddingTop: 64 }}>
          <Scene key="home" component={Home} title="Profile" type="reset" />
          <Scene key="chatmain" component={ChatMain} title="ChatMain" type="reset" />
          <Scene key="chat" component={Chat} title="Chat" />
          <Scene key="friendlist" component={FriendList} title="FriendList" />
          <Scene key="chatF" component={ChatF} title="ChatF" />
          <Scene key="video" component={Video} title="Video" type="reset" />
          <Scene key="medical" component={Medical} title="Medical" type="reset" />
        </Scene>
      </Router>
    );
  }
}
export default App;

Menu.js:

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  StatusBar
} from "react-native";

import BottomNavigation, { Tab } from "react-native-material-bottom-navigation";
import Icon from "react-native-vector-icons/MaterialIcons";
import { Actions } from "react-native-router-flux";

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeTab: this.props.activeTab };
    this.handleTabChange = this.handleTabChange.bind(this);
  }
  handleTabChange(newTabIndex, oldTabIndex) {
    this.setState({ activeTab: newTabIndex });
    if (newTabIndex === oldTabIndex) {
      null;
    }
    if (this.state.activeTab === 0) {
      Actions.home();
    } else if (this.state.activeTab === 1) {
      Actions.chatmain();
    } else if (this.state.activeTab === 2) {
      Actions.video();
    } else {
      Actions.medical();
    }
  }

  render() {
    return (
      <View>
        <BottomNavigation
          activeTab={this.state.activeTab}
          labelColor="white"
          rippleColor="white"
          style={{
            height: 56,
            elevation: 8,
            position: "absolute",
            left: 0,
            bottom: 0,
            right: 0
          }}
          onTabChange={this.handleTabChange}
        >
          <Tab
            barBackgroundColor="#2980b9"
            label="Profile"
            icon={<Icon size={24} color="white" name="fingerprint" />}
          />
          <Tab
            barBackgroundColor="#00796B"
            label="Chat"
            icon={<Icon size={24} color="white" name="chat" />}
          />
          <Tab
            barBackgroundColor="#FF9800"
            label="Therapist"
            icon={<Icon size={24} color="white" name="videocam" />}
          />
          <Tab
            barBackgroundColor="#c0392b"
            label="Medication"
            icon={<Icon size={24} color="white" name="local-hospital" />}
          />
        </BottomNavigation>
      </View>
    );
  }
}
export default Menu;

Video.js:

import React from "react";
import { Actions } from "react-native-router-flux";
import Menu from "../Menu";

class Video extends React.Component {
  state = {
    name: ""
  };
  static navigationOptions = {
    headerStyle: {
      backgroundColor: "#FF9800",
      elevation: null
    }
  };
  render() {
    return (
      <View style={styles.containerl}>
        <StatusBar barStyle="light-content" backgroundColor="#FF9800" />
        <Menu activeTab="2" />
      </View>
    );
  }
}
export default Video;

I'm trying to change the font of the tabs label but labelStyle doesn't work.

Hey Guys,

Probably not a real issue but if it is possible to do maybe we add it to the docs for us none Front Enders.

On tab change I want to keep the ripple effect but I do not want the EaseIn effect. In my case the Tabs are used as Actions not links. I cannot for the life of me find an example in the repo.

Please excuse my brevity I am typing this on my phone.

Thanks!

Is this possible to remove the resizing animation while switching to other tabs? Thanks in advance.

Observations made

• … in Android
• … in Shifting mode
• Seems to happen randomly?

Description

Sometimes the icon, which is animating into its active state, will just jump up instead of animating.

Although this sounds like the HACK in ./lib/Tab.js, it can't be the cause, because this seems to happen randomly.

rippleColor: 'white',
tabs: {
  SomeTab: {
    rippleColor: 'black'
  }
}

This should work, but it doesn't

What kind of Issue is this?

• (x) Bug Report
• () Question / Problem
• () Discussion / Feature Request

How are you using the Bottom Navigation?

• (x) I use the Bottom Navigation together with react-navigation; the Issue is not appearing when I'm using react-navigation's TabBar instead.
• () I use the standalone version.

Expected behavior

Will show tabbar with icons

Actual behavior

getting error undefined on render method of navigationComponent

Additional description and resources

export const SignedIn = TabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: "Home",
        tabBarIcon: ({ tintColor }) =>
          <FontAwesome name="home" size={30} color={tintColor} />
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: "Profile",
        tabBarIcon: ({ tintColor }) =>
          <FontAwesome name="user" size={30} color={tintColor} />
      }
    }
  },
  {
    tabBarComponent: NavigationComponent,
    tabBarPosition: 'bottom',
    tabBarOptions: {
      bottomNavigationOptions: {
        labelColor: 'white',
        rippleColor: 'white',
        tabs: {
          Home: {
            barBackgroundColor: '#37474F'
          },
          Profile: {
            barBackgroundColor: '#00796B'
          },
        }
      },
      style: {
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
      }
    }
  }
);

export const createRootNavigator = (signedIn = false) => {
  return StackNavigator(
    {
      SignedIn: {
        screen: SignedIn,
        navigationOptions: {
          gesturesEnabled: false
        }
      },
      SignedOut: {
        screen: SignedOut,
        navigationOptions: {
          gesturesEnabled: false
        }
      }
    },
    {
      headerMode: "none",
      mode: "modal",
      initialRouteName: signedIn ? "SignedIn" : "SignedOut"
    }
  );
};

What did you do to find a solution?

I tried the example but this also happens

Environment

• React Native versions: 0.49.5
• react-native-material-bottom-navigation version: 0.5.2
• react-navigation version: {1.0.0-beta.15}
• I tested this with: {Android}

activelabelColor - should have been activeLabelColor

I'm using react-native-material-bottom-navigation with react-navigation and Redux.

When tapping a tab, there is a half a second delay between tapping and the navigation actually happening. I can see the ripple effect on the tab is also delayed.

Any idea why it's doing that?

Is there a way that I can program the tab views so that it does not load if I'm going back to a tab?
For example, I have a table view that gets populated from a network call on tab 1, I then navigate to another tab and navigate back to tab 1, I find that it reloads the view, it makes a network call and loads loads the table view as though it dismounted the view.

My Project it's look like this
-Login
--Home Tab
---Menu
-----Attendance
---Profile
-----Change Password
---Settings

When I tried to enter Attendance menu or Change Password, I want to try to hide the bottom navigation but didn't know how to change these setting. Is there any trick to accomplished that?

I'm trying to set the backgroundColor of the <BottomNavigation> component, and it doesn't seem to like variable props. Is this expected behavior? It works just fine in the <Tab> component for the barBackgroundColor prop. Here is my code:

<BottomNavigation
  labelColor="white"
  rippleColor="white"
  activeTab={0}
  backgroundColor={this.props.visibleOptions.buttonColor}
  style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }}
  onTabChange={(newTabIndex) => this.replaceView(bottomMenu[newTabIndex])}
>
  <Tab
    barBackgroundColor={this.props.visibleOptions.buttonColor}
    label="Home"
    icon={<Icon size={24} style={{color: "white"}} name="home" />}
  />
  <Tab
    barBackgroundColor={this.props.visibleOptions.buttonColor}
    label="Categories"
    icon={<Icon size={24} style={{color: "white"}} name="ios-keypad-outline" />}
  />
  <Tab
    barBackgroundColor={this.props.visibleOptions.buttonColor}
    label="Cart"
    icon={<Icon size={24} style={{color: "white"}} name="ios-cart-outline" />}
  />
  <Tab
    barBackgroundColor={this.props.visibleOptions.buttonColor}
    label="More"
    icon={<Icon size={24} style={{color: "white"}} name="more" />}
  />
</BottomNavigation>

Update:

I did try to use just a string hex value, and it doesn't accept that either:

<BottomNavigation
  labelColor="white"
  rippleColor="white"
  activeTab={0}
  backgroundColor="#001F37"
  style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }}
  onTabChange={(newTabIndex) => this.replaceView(bottomMenu[newTabIndex])}
>

Hello everyone, I'm using react-native-material-bottom-navigation to navigate between screens in my application, however I do not know how to take the user to another screen when clicking a button, 'onPress' does not seem to work.

Does anyone know how I can take the user to another screen?

The elevation prop applied to the bottom navigation bar doesn't seem to work in the integration with react-navigation.

Possible workaround, apply also borderTopWidth: 0 to the style.

Hey,

We've got shifting set to false on our app, and it's quite obvious the icons don't seem to be aligned in the center above the text:

Putting this into PS:

I'll double check it's not something to do with the view being out of place around the icon (directly from react-native-material-icons) though.

How to route to some screens on clicking bottom tab items?
Please help

Hi, I'm practically new on react-native, and I got to see this great bottom navigation, however there's a little problem with the onTabChange behaviour

I put the BottomNavigation as the navigationBar in my Navigator.

I made 3 Tabs.
When I change from the 1st to the 2nd tab, it is okay. The navigator shows the 2nd page without any problem. However when I change the tab from the 2nd to the 3rd, it will go back to the 1st tab right away. It is fine if I only use alert to show the newtab, but when I make update on the navigator, it will do the weird behaviour.

here's my code :

<Navigator
        initialRoute={{name: 'listing'}}
        configureScene={() => Navigator.SceneConfigs.FadeAndroid}
        renderScene={RouteMapper}
        navigationBar={
          <BottomNavigation
            labelColor="white"
            rippleColor="white"
            style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }}
            onTabChange={this._handleTabChange}
            >
            <Tab
              barBackgroundColor="#37474F"
              label="Home"
              icon={<Icon size={24} color="white" name="home" />}
            />
            <Tab
              barBackgroundColor="#00796B"
              label="Category"
              icon={<Icon size={24} color="white" name="list" />}
            />
            <Tab
              barBackgroundColor="#5D4037"
              label="Search"
              icon={<Icon size={24} color="white" name="search" />}
            />
          </BottomNavigation>
          }
        />

_handleTabChange(newTabIndex, oldTabIndex) {
    if(newTabIndex == 0 && oldTabIndex != newTabIndex) {
      _lastTab = newTabIndex;
      _navigator.popToTop();
    } else if(newTabIndex == 1 && oldTabIndex != newTabIndex) {
        _navigator.push({
          title: 'sample',
          name: 'sample'
        });
    } else if(newTabIndex == 2 && oldTabIndex != newTabIndex) {
        _navigator.push({
          title: 'search',
          name: 'search'
        });
    }
  }


const RouteMapper = function(route, navigationOperations, onComponentRef) {
  _navigator = navigationOperations;
  if(route.name == 'listing') {
    return (
      <Listing navigator={navigationOperations} > </Listing>
    );
  } else if(route.name == 'sample') {
    return(
      <CategoryList navigator={navigationOperations}> </CategoryList>
    );
  } else if(route.name == 'search') {
    return(
      <Search navigator={navigationOperations}> </Search>
    );
  }
};

The onTabChange function is in 80% of the cases (but not always) executed twice. The first time with the actual new tabIndex, the second time with the tabIndex 0. This only occurs when I use setState in the function. See my example code:

      {this.state.page === "Screen1" && <HomeScreen navigation={this.props.navigation}/>}
      {this.state.page === "Screen2" && <View><Text>hihihihi</Text></View>}
      {this.state.page === "Screen3" && <View><Text>hallo welt</Text></View>}
      {this.state.page === "Screen4" && <View><Text>hallo welt123</Text></View>}
      {this.state.page === "Screen5" && <View><Text>hihihihi</Text></View>}

      <BottomNavigation
        labelColor="black"
        rippleColor={GLOBAL.COLOR.ORANGE}
        style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }}
        onTabChange={(newTabIndex) => {
          alert(newTabIndex);
          switch(newTabIndex) {
            case 0: this.setState({page: 'Screen1'}); break;
            case 1: this.setState({page: 'Screen2'}); break;
            case 2: this.setState({page: 'Screen3'}); break;
            case 3: this.setState({page: 'Screen4'}); break;
            case 4: this.setState({page: 'Screen5'}); break;
          }
          console.log(this.state);
        }}
        shifting={false}
      >

So for example, when I click on TabIcon 3, it becomes active for one second and then the first tabIcon becomes active. Does someone know how I can resolve this issue?

Hi,
Is it possible to customize more then 3 images without shifting ?

Description

The whole bar should work with a translucent navigation. Using the code below to achive this, the height of the actual bar will be height - paddingBottom. Somehow the paddingBottom should affect the bottom navigation bar itself.

ETA

Mar 2nd

Documentation

For res/styles.xml

<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>

and using

style: {
  height: 104,
  paddingBottom: 48
},

supporting icon-only might be helpful for a certain amount of people

I am using this library with react-navigation, below is my router config:
It is strange, sometimes it works and sometime doesn't.

let tabConfig = {
    tabBarComponent: NavigationComponent,
    tabBarPosition: 'bottom',
    tabBarOptions: {
        bottomNavigationOptions: {
            labelColor: 'white',
            rippleColor: 'white',
            tabs: {
                HomeNav: {
                    barBackgroundColor: '#03A9F4'
                },
                Following: {
                    barBackgroundColor: '#009688'
                },
                Notification: {
                    barBackgroundColor: '#ef5350'
                }
            }
        }
    }
};

export const Tabs = TabNavigator({
    HomeNav: {
        screen: Home,
        navigationOptions: {
            tabBar: {
                label: 'Prayer time',
                icon: () => <Icon name="account-circle" size={24} color={'white'} />
            },
        },
    },
    Following:{
        screen: FollowingViewContainer,
        navigationOptions: {
            tabBar: {
                label: 'Following',
                icon: () => <Icon name="list" size={24} color={'white'} />
            },
        },
    },
    Notification: {
        screen: NotificationViewContainer,
        navigationOptions: {
            tabBar: {
                label: 'Notification',
                icon: () => <Icon name="notifications" size={24} color={'white'} />
            },
        },
    },
}, tabConfig);

Every time when pressing a Tab, measureLayout will be called. This takes a while and causes a slight delay when pressing the tab.

measureLayout should be delegated to a point in time before the tab is pressed.

Hello. Thanks for your package.
I receive ""undefined is not an object (evaluating '_this.refs.pressRipple.run')"" error when tab pressing takes me to another page of the app. To note, this page renders properly when I go to it from side menu, so the component is not the problem here.

Please help to solve the problem

You can see in the image
that I attached some spaces around the container.
In your demo files there is not any spaces like these. So how can I remove them?

How does react-navigation add buttons in the center?,Thank you!

When using the icon inside navigationOptions, tintColor is undefined. Need to check in TabView.TabBarBottom how and why.

I am using this navigation with react navigation TabNavigator. Just followed the Readme.
It turns out that when I tap a tab it ripples twice.
I have to wait for next screen for more than one second.
This is kind of disturbing.
PS: Tab will ripple once if the screen is swiped. But there is still a delay for about 1 second.

I wanna change the icon with my own icon (icon.io), at the default it using react element. Can u explain how to change it? thanks before

I have a navigation menu in it there are several buttons, when I press the button in the navigation menu. as a result my navigation menu disappears, and its label follows the title I have set in staticNavigationOptions. I try position: 'absolute' and flex: 1, the navigation disappears. how to fix it?
normal navigation:

when i press the menu navigable button: