Icon is not displaying in react-navigation-header-buttons (React Native)

Question

I am trying to add an icon to the headerRight using react-navigation-header-buttons library. But the title of the icon is displaying instead of the icon.

This is the code where icon should display.

import React, { useState, useLayoutEffect } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native'

import { MEALS } from '../data/DummyData';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import { HeaderButton } from '../components/CustomHeaderButton';

const MealDetailScreen = props => {
    const mealId = props.route.params.mealId;
    const selectedMeal = MEALS.find(meal => meal.id == mealId);
    const [headerTitle, setHeaderTitle] = useState();

    useLayoutEffect(() => {
        setHeaderTitle(() => selectedMeal === undefined ? props.route.params.title : selectedMeal.title)
        props.navigation.setOptions({
            headerTitle: headerTitle,
            headerRight: () => (
                <HeaderButtons HeaderButtonComponent={HeaderButton}>
                    <Item
                        title="Favourite"
                        iconName="ios-star"
                        onPress={() => {
                            console.log('Mark as favorite!');
                        }}
                    />
                </HeaderButtons>
            )
        });
    }, [props.navigation, headerTitle]);


    return (
        <View>
            <Text>The Meal Detail Screen!</Text>
            <Text>{selectedMeal.title}</Text>
            <Button title="Go Back to Categories!" onPress={() => {
                props.navigation.popToTop();
            }} />
        </View>
    )
}

const styles = StyleSheet.create({
});

export default MealDetailScreen;

This is the custom component for the header button.

import React from 'react';
import { Platform } from 'react-native';
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={Platform.OS === 'android' ? 'white' : Colors.primaryColor}
        />);
}

export default CustomHeaderButton;

Only the title in the is displaying at the headerRight.

<Item
  title="Favourite"
  iconName="ios-star"
  onPress={() => {
  console.log('Mark as favorite!');
  }}
/>

React Native version: 5 react-navigation-header-buttons version: 3.0.5

keikai · Accepted Answer · 2020-05-04 18:48:56Z

7

The problem lies in your component import statement.

Instead of

import { HeaderButton } from '../components/CustomHeaderButton';

Type

import HeaderButton from '../components/CustomHeaderButton';

edited May 4, 2020 at 18:48

keikai

15.3k10 gold badges56 silver badges73 bronze badges

answered May 4, 2020 at 16:35

DaveK

711 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Sabirov_Otabek · Accepted Answer · 2020-07-19 11:00:55Z

I solved the same problem with 2 changes:

Instead of :

import { HeaderButton } from '../components/CustomHeaderButton';

Typed :

import HeaderButton from '../components/HeaderButton';

I returned < HeaderButton > with arrow function and set it in headerRight as a variable headerRightButton :

MealDetailScreen.navigationOptions = (navigationData) => {
    const mealId = navigationData.navigation.getParam('mealId');
    const selectedMeal = MEALS.find(meal => meal.id === mealId);
    const headerRightButton = () => {
        return (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item 
                                title= 'Favorite'
                                iconName="ios-star"
                                onPress= {() => {
                                    console.log('Added to favorites');
                                }}
                            />
                            <Item 
                                title= 'Favorite'
                                iconName= "ios-star-outline"
                                onPress= {() => {
                                    console.log('Added to favorites2');
                                }}
                            /> 
                      </HeaderButtons>
        );
    };
    return {
            headerTitle: selectedMeal.title,
            headerRight: (headerRightButton)
        };
};

dj-doMains · Accepted Answer · 2020-05-20 05:51:01Z

I found in the example given, the IconComponent is (for whatever reason) not being passed down into Item. Since IconComponent is undefined, a Text component is used instead. That logic can be seen here.

The way I approached this is to create a custom component that would return the HeaderButtons instead of HeaderButton:

import React from 'react';
import { Ionicons } from '@expo/vector-icons';
import Colors from '../constants/colors';
import { Platform } from 'react-native';
import { HeaderButtons, HeaderButton } from 'react-navigation-header-buttons';

const CustomHeaderButton = (props) => (
  <HeaderButton
    IconComponent={Ionicons}
    iconSize={23}
    color={Platform.OS === 'android' ? 'white' : Colors.primaryColor}
    {...props}
  />
);

export const CustomHeaderButtons = (props) => {
  return <HeaderButtons HeaderButtonComponent={CustomHeaderButton} {...props} />;
};
export { Item } from 'react-navigation-header-buttons';

Now you can use it like this:

import { CustomHeaderButtons, Item } from '../components/HeaderButton';
...
MealDetailScreen.navigationOptions = navigationData => {
  const mealId = navigationData.navigation.getParam('mealId');
  const selectedMeal = MEALS.find(meal => meal.id === mealId);
  return {
    headerTitle: selectedMeal.title,
    headerRight: () => (
      <CustomHeaderButtons>
        <Item
          title='Favorite'
          iconName='ios-star'
          onPress={() => { console.log('Marked as favorite!') }}
        />
      </CustomHeaderButtons>
    )
  };
};

IconComponent={Ionicons} -> can i use multiple icon library inside IconComponent, so that i use different icon name from different library, IconComponent={Ionicons | Fontawesome} something like this

Henry Ecker · Accepted Answer · 2021-11-15 04:12:09Z

0

This could be problem with background color of your header.

My Case: Header button appeared in Android but not in iOS(iPhone).

Resolution: Change below line to apply background independent of platform

From

color={Platform.OS === 'android' ? 'white' : Colors.primaryColor}

to

color='white'

edited Nov 15, 2021 at 4:12

Henry Ecker♦

35.8k19 gold badges48 silver badges67 bronze badges

answered Nov 15, 2021 at 3:52

Ibrahim.Mohammad

11 bronze badge

Collectives™ on Stack Overflow

Icon is not displaying in react-navigation-header-buttons (React Native)

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related