CODEWITHSUNDEEP
react-nativereact-navigation
willedanielsson
willedanielsson

Reputation: 1333

React native react-navigation tabBarIcon does not display

I'm having a TabNavigator where I want to have icons at each tab together with a label. However, even though I've tried numerous ways in order to get the icon to appear, nothing happens.

// Imports...

const StartScreen =  TabNavigator({
    Home: {
        screen: HomeTab,
        navigationOptions: {
            tabBarLabel: 'Test',
            tabBarIcon:() => <Icon size={ 20 } name={ 'cogs' } color={ 'red' }/>
        }
    },
    Calendar: {
        screen: CalendarTab,
        navigationOptions: {}
    }
});

StartScreen.navigationOptions = {
    title: 'TestApp',
    headerTintColor: '#ffa500',
    showIcon: true
};

export default StartScreen;

And yes, I've tried out using the Icon-component so I know that it works.

Any tips or guidance would be really helpful, thanks!

Upvotes: 4

Views: 19572

Answers (5)

Zakaria Belassal
Zakaria Belassal

Reputation: 91

try to use tabBarOptions = {{ showIcon: true }}

I had the same problem , I have to force the display of my icons I set showIcon to true. This previously solved my problem.

Upvotes: 0

XShadow
XShadow

Reputation: 1

what is the version your react-navigation is???

you can try this 

navigationOptions: {
            tabBar: {
                label: 'Test',
                icon: ({tintColor}) => (<Icon ... />),
            },
        }

it will work in version 1.0.0-beta.7

Upvotes: -1

Allan
Allan

Reputation: 211

I had the same problem with version 1.0.0-beta14.

For me, upgrading to 1.0.0-beta15 fixed it

Upvotes: 0

Long Nguyen
Long Nguyen

Reputation: 51

This works

const StartScreen =  TabNavigator({
  Home: {
    ...
  },
  Calendar: {
    ...
  },
},  {  
  tabBarOptions: { 
    showIcon: true 
  }, 
});

EDIT: I just checked and there is no google material icon named cogs. You should double check your naming :)

Upvotes: 4

Eduard
Eduard

Reputation: 9205

Try adding return before the icon, like this:

tabBarIcon:() => return <Icon size={ 20 } name={ 'cogs' } color={ 'red' }/>

Upvotes: -2

Related Questions