Background color for BottomNavigation component

[dekkofilms]

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])}
>

[timomeh]

If you have barBackgroundColor in all your Tabs, the backgroundColor of the BottomNavigation-Component is kinda unnecessary. The backgroundColor is like a fallback/default when a Tab has no barBackgroundColor. Also it shouldn't matter if you pass a string or a variable. In the end it's just a style={{ backgroundColor }}, so you can use it like every other color in RN.

I tested example/SimpleBottomNavigation.js inside Expo's Snack and everything looked good (except that I forgot a return in that file which I'm gonna fix now).

Can you confirm your this.props.visibleOptions.buttonColor is indeed a valid color string and accessible inside your render function (e.g. by just console.log-ing it in your render function)?

If you still have this error, please provide a simple example to reproduce it.

[dekkofilms]

Yeah I only have the barBackgroundColor in all the Tabs as another way of just trying to get the initial color of the BottomNavigation to work. I did have a console log out, and it's a valid hex of: #001F37

But it also wasn't working even when I tried to enter in the string itself "#001F37"

I also made a snack expo here is the link: https://snack.expo.io/H1ayIorc-

And I also have a screenshot:

[timomeh]

In your example, you used barBackgroundColor instead of backgroundColor on the BottomNavigation Component. If I change barBackgroundColor to backgroundColor, it works like expected.

To clarify: The BottomNavigation-Component has the backgroundColor prop, the Tab-Component has the barBackgroundColor prop.

So I still can't reproduce your error, sorry. 😕

[dekkofilms]

Hmmm, yeah my apologies. I did change that in the snack expo test, and it's working as expected now ... but I still can't get the same results in my react native project even when I copy and paste this over. Weird.

[dekkofilms]

Feel free to close this ... I think it might just be an error locally in my project. I don't think it has anything to do with this repo. Thanks for checking on it with me though! 👍

[timomeh]

Ok, no problem.