React native react-navigation tabBarIcon does not display

Question

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!

Answer 1

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 :)