Icon not rendering from Ionicon vector icons in header

Question

Trying to render a menu icon in the upper left corner for a stack navigator nested inside a bottom tab navigator. I am using react-navigation-header-buttons library for aid in formatting the icon in the stack header. Basically, the title of the Item component "Menu" is showing rather than the icon I am attempting to use.

//HomeScreenNavigator.js
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';

import HomeScreen from '../screens/HomeScreen';
import MediaSelectScreen from '../screens/MediaSelectScreen';
import FinalizePostScreen from '../screens/FinalizePostScreen';
import Colors from '../constants/Colors';
import CustomHeaderButton from '../components/HeaderButton';

const HomeScreenNavigator = createStackNavigator({
    Home: { screen: HomeScreen, navigationOptions: {
        headerTitle: 'Feed',
        headerLeft: (
            <HeaderButtons> HeaderButtonComponent={CustomHeaderButton} 
                <Item title="Menu" iconName="ios-menu" onPress={() => {}} />
            </HeaderButtons>
        )
    }},
    MediaSelect: MediaSelectScreen,
    FinalizePost: FinalizePostScreen
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: Colors.accentColor
        }
    }
});

export default HomeScreenNavigator;

//HeaderButton.js
import React from 'react';
import { HeaderButton } from 'react-navigation-header-buttons';
import { Ionicons } from '@expo/vector-icons';

import Colors from '../constants/Colors';

const CustomHeaderButton = props => {
    return <HeaderButton 
        {...props} 
        IconComponent={Ionicons} 
        iconSize={23} 
        color={Colors.iconSelectedOutline} 
    />
};

export default CustomHeaderButton

No error messages are shown but no icon is shown either. Instead The header bar just has a headerLeft button with text "MENU" and then the Header title "Feed". screenshot-simulator

SKeney SKeney · Accepted Answer · 2019-09-06T05:52:24

Line of code that was causing the issue:

<HeaderButtons> HeaderButtonComponent={CustomHeaderButton}

Needs to be:

<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>

Icon not rendering from Ionicon vector icons in header

1 Answers