CODEWITHSUNDEEP
react-nativenavigationreact-navigationjsxtabbar
Henrik
Henrik

Reputation: 928

React Navigation tabbar color doesn't work

I have a React Navigation navigation system with a tabbar. Now my problem:

When I add a color the text under my Icons will appear. If I remove the Text I can't have a tabbar color. Either label or color :/ This is my code:


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="Home" component={HomeScreen} options={{tabBarIcon: () => <ChatBubbleIcon />}} />
      <Tab.Screen name="Search" component={SearchScreen} options={{tabBarIcon: ({focused}) => focused ? <ShuffleIconActive /> : <ShuffleIcon />}}  />
      <Tab.Screen name="Personal" component={PersonalScreen} options={{tabBarIcon: ({focused}) => focused ? <ChatBubbleIcon /> : <ChatBubbleIcon />}} />
    </Tab.Navigator>
  );
}

Edit

So I want that my Tabbar has a Icon but without a text. For example Instagram has a Tabbar like this: enter image description here

How you can see: Instagram is not pure white --> It has a light grey color.

Upvotes: 0

Views: 294

Answers (1)

user15244524
user15244524

Reputation:

Try to use screenOptions instead of tabBarOptions! :)

Upvotes: 0

Related Questions