React Native Header Right Icon

Question

I am having an issue with my header right icon. I would like my right icon on the header bar be a search icon and I get the title name of the icon instead. my app

Any ideas what I am doing wrong?

I followed the tutorial: https://github.com/vonovak/react-navigation-header-buttons and please find the part of my code that should render the icon.

 ProductsOverviewScreen.navigationOptions={ headerTitle: 'All products', headerRight: <HeaderButtons HeaderButtonCompoenent = {HeaderButton}> <Item title='Cart' iconName={'ios-search'} onPress={()=>{}}/> </HeaderButtons> }

Here is the full page code if needed:

 //LIST OF ALL PRODUCTS WE CAN ORDER import React from 'react' import {View, Text, StyleSheet, FlatList} from 'react-native' //useStore -- helps use to go into the redux store and get our products from there import {useSelector, useDispatch} from 'react-redux' import ProductItem from '../../components/shop/ProductItem' //importing all cart actions import * as cartActions from '../../store/actions/cart' import {HeaderButtons, Item} from 'react-navigation-header-buttons' import HeaderButton from '../../components/UI/HeaderButton' //This is a component named ProductsOverviewScreen const ProductsOverviewScreen = props => { //products: placed in the combine reducers function in App.js //here we get all the available products using useSelector which gets as input the state and we can retrieve the data from there // ---- allows you to extract data from the Redux store state const products = useSelector(state => state.products.availableProducts) //Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. //You send them to the store using store.dispatch() const dispatch = useDispatch() return( <View> <FlatList data={products} keyExtractor={item=> item.id} renderItem={ itemData => <ProductItem image={itemData.item.imageUrl} title={itemData.item.title} price={itemData.item.price} //props.navigation.navigate('ProductDetail') will take us to the ProductDetail screen //{productId: itemData.item.id} pass productId to the ProductDetail screen onViewDetail = {() => {props.navigation.navigate('ProductDetail', { productId: itemData.item.id, })}} onAddToCart = {() => { dispatch(cartActions.addToCart(itemData.item)) }} />} /> </View> ) } ProductsOverviewScreen.navigationOptions={ headerTitle: 'All products', headerRight: <HeaderButtons HeaderButtonCompoenent = {HeaderButton}> <Item title='Cart' iconName={'ios-search'} onPress={()=>{}}/> </HeaderButtons> } //export so that the component is available elsewhere export default ProductsOverviewScreen

Answer 1

It's just a silly mistake, try adding () around the headerRight component.

ProductsOverviewScreen.navigationOptions={
    headerTitle: 'All products',
    headerRight : (
      <HeaderButtons headerButtonCompoenent={HeaderButton}>
        <Item title='Cart' iconName={'ios-search'} onPress={()=>{}}/>
    </HeaderButtons>
    )
}

Answer 2

In this HeaderButtonCompoenent is misspelled try to change and add ( )around your headerbuttons.

Hope this helps!