CODEWITHSUNDEEP
react-nativereact-navigation
Henrik
Henrik

Reputation: 928

React Navigation Tab Bar Icon disappears when changing background color

So I have a React Navigation project with a normal Tabbar. Now I want to change the Apps color to a darker Gray-Blue. So this is my code:

const HomeTabs = () => {
  return (
    <Tab.Navigator tabBarOptions={{style:{backgroundColor: "#191720"}}}>
      <Tab.Screen name="Home" component={HomeScreen} options={{tabBarIcon: ({focused}) => focused ?  <ChatBubbleIconActive /> : <ChatBubbleIcon />}}/>
      <Tab.Screen name="Search" component={SearchScreen} options={{tabBarIcon: ({focused}) => focused ? <ShuffleIconActive /> : <ShuffleIcon />}}  />
      <Tab.Screen name="Personal" component={PersonalScreen} options={{tabBarIcon: ({focused}) => focused ? <ChatBubbleIconActive /> : <ChatBubbleIcon />}} />
    </Tab.Navigator>
  );
}

My Tab bar looks like this:

![enter image description here

Great! Now I wanted to remove the font/label at the bottom of my icons So I changed the code to this:


const HomeTabs = () => {
  return (
    <Tab.Navigator tabBarOptions={{style:{backgroundColor: "#191720"}}, {showLabel: false}}>
      <Tab.Screen name="Home" component={HomeScreen} options={{tabBarIcon: ({focused}) => focused ?  <ChatBubbleIconActive /> : <ChatBubbleIcon />}}/>
      <Tab.Screen name="Search" component={SearchScreen} options={{tabBarIcon: ({focused}) => focused ? <ShuffleIconActive /> : <ShuffleIcon />}}  />
      <Tab.Screen name="Personal" component={PersonalScreen} options={{tabBarIcon: ({focused}) => focused ? <ChatBubbleIconActive /> : <ChatBubbleIcon />}} />
    </Tab.Navigator>
  );
}

So I added showlabel: false! But now my Tabbar looks like this:

enter image description here

You see: the backgroundcolor is missing. Just gone :/

When I add {showIcon: true} tothe tabBarOptions my Tabbar looks like this: enter image description here

:/

So than I thought: Why not change the the order of the attributes. But than the Tabbar looks like at the beginning

This would be the code:

const HomeTabs = () => {
  return (
    <Tab.Navigator tabBarOptions={ {showLabel: false}, {showIcon: true}, {style:{backgroundColor: "#191720"}}}>
      <Tab.Screen name="Home" component={HomeScreen} options={{tabBarIcon: ({focused}) => focused ?  <ChatBubbleIconActive /> : <ChatBubbleIcon />}}/>
      <Tab.Screen name="Search" component={SearchScreen} options={{tabBarIcon: ({focused}) => focused ? <ShuffleIconActive /> : <ShuffleIcon />}}  />
      <Tab.Screen name="Personal" component={PersonalScreen} options={{tabBarIcon: ({focused}) => focused ? <ChatBubbleIconActive /> : <ChatBubbleIcon />}} />
    </Tab.Navigator>
  );
}

And this is the Tabbar:

enter image description here

So it seems like only the tabBarOptions would be registered. This is bad and how to change this?

Upvotes: 1

Views: 2012

Answers (1)

Lan Do
Lan Do

Reputation: 150

This could be an issue with using tabbaroptions (this is deprecated in v 6.x). Try using screenOptions instead with your desired attributes and let me know how it goes!

Upvotes: 2

Related Questions