Header button with icon in React Native

Question

I have created a sample app using ReactNative. And I have used ReactNative Navigation for navigation (Stack Navigation). It has only 2 screens. Home and Detail screen. I was able to implement Stack navigation successfully. However I'm having issues adding an icon for header button in right side of header title. To add header button with icon I used a third party library called HeaderButtons. However when I render, it only shows the title not the icon. Please note that I have used expo to create reactnative project and icons from @expo/vector-icons.

thanks in advance, Yohan

// This is custom header component

import React, { Component } from "react";
import { Platform } from "react-native";
import { HeaderButton } from "react-navigation-header-buttons";
import { Ionicons } from "@expo/vector-icons/Ionicons";


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

export default CustomHeaderButton;

// This is the root navigation

import React, { Component } from "react";
import {Button} from'react-native'
import { createStackNavigator } from "@react-navigation/stack";

// import screens
import HomeScreen from "../screens/HomeScreen";
import DetailScreen from "../screens/DetailScreen";

import { HeaderButtons, Item } from "react-navigation-header-buttons";
import  {HeaderButton}  from "../component/HeaderButton";

const Stack = createStackNavigator();

function StackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerRight: ()=>(
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
             <Item
               title="Header"
               iconName="ios-search"
               onPress={() => {
                 alert("Button clicked");
               }}
             />
           </HeaderButtons> 
         ),
        }}
      />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

export default StackNavigator;

I seem to be having the same issue. Did you find a solution? — Ted
Also running into what i believe is the same issue. A solution would be greatly appreciated! :) — Andrew B.
Yes the issue was stemming from mixing both react-native-navigation 4.0 and 5.0. — Andrew B.

vihaga yohan94 vihaga yohan94 · Accepted Answer · 2020-12-03T04:58:42

I asked this question months ago. and now I'm going to answer my own question. We can use headerRight property in ReactNavigation as per the documentation. here is an example

import React, {Component} from 'react';
import {Button} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';

// components
import AddCart from '../components/AddCart';

// screens
import HomeScreen from '../screens/HomeScreen';
import ProductsScreen from '../screens/ProductsScreen';
import ProductDetailsScreen from '../screens/ProductDetailsScreen';
import CartScreen from '../screens/Cart';
import UserLocationMapScreen from '../screens/Map/MapScreen';
import OrderConfirmationScreen from '../screens/Order/OrderConfirmationScreen';
import AuthNavigator from '../navigation/AuthNavigator';
import CartNavigator from '../navigation/CartNavigator';

import defaultStyles from '../config/style';

const Stack = createStackNavigator();

const ProductNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={({navigation}) => ({
        headerStyle: {
          backgroundColor: defaultStyles.colors.primaryColor,
        },
        headerTintColor: defaultStyles.colors.whiteColor,
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        headerRight: () => (
          <AddCart
            name="cart"
            iconColor={defaultStyles.colors.whiteColor}
            backgroundColor={defaultStyles.colors.primaryColor}
            onPress={() => navigation.navigate('Cart')}
          />
        ),
      })}>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{title: 'Quickee - Categories'}}
      />
      <Stack.Screen
        name="All_Products"
        component={ProductsScreen}
        options={({route}) => (
          {
            title:route.params.categoryName
          }
        )}
      />
      <Stack.Screen
        name="Product_Details"
        component={ProductDetailsScreen}
        options={{title: ''}}
      />
      <Stack.Screen
        name="Cart"
        component={CartScreen}
        options={{title: 'Shopping Cart', headerRight: ''}}
      />
      <Stack.Screen
        name="User_Location"
        component={UserLocationMapScreen}
        options={{title: 'Pick Your Delivery Location', headerRight: ''}}
      />
      <Stack.Screen
        name="Order_Confirmation"
        component={OrderConfirmationScreen}
        options={{
          title: 'Order Confirmation',
          headerRight: '',
        }}
      />
      <Stack.Screen
        name="Auth"
        component={AuthNavigator}
        options={{headerShown: false}}
      />
    </Stack.Navigator>
  );
};

export default ProductNavigator;

Note. screenOptions property requires an object or a function that returns an object

here is the documentation for react navigation 5v header configuration enter link description here

Header button with icon in React Native

1 Answers