I created a drawerNavigator and now I'm trying to add an icon to the header. The issue is when I add my HeaderButton I get this error:
In the navigationOptions I tried to use both HeaderButton and CustomHeaderButton but it doesn't work and I can't seem to figure out the issue.
This is my code:
HeaderButton.js
import React from "react";
import { HeaderButton } from "react-navigation-header-buttons";
import { Ionicons } from "@expo/vector-icons";
const CustomHeaderButton = (props) => {
return (
<HeaderButton
{...props}
IconComponent={Ionicons}
iconSize={23}
color="black"
/>
);
};
export default CustomHeaderButton;
WelcomeScreen.js
import React from "react";
import { View, Text, StyleSheet, ImageBackground, Image } from "react-native";
import MainButton from "../components/MainButton";
import Colors from "../constants/Colors";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import HeaderButton from "../components/HeaderButton";
const WelcomeScreen = (props) => {
return (
<ImageBackground
source={require("../assets/images/tsl.jpg")}
style={styles.backgroundImage}
>
<Image
source={require("../assets/images/slogan.jpg")}
style={styles.logo}
/>
<View style={styles.buttonContainer}>
<MainButton
onPress={() => {
props.navigation.navigate({
routeName: "UserLogin",
});
}}
>
User Login
</MainButton>
<MainButton
onPress={() => {
props.navigation.navigate({ routeName: "DriverLogin" });
}}
>
Driver Login
</MainButton>
<View style={styles.newAccountContainer}>
<Text style={styles.newAccountText}>Don't have an account?</Text>
</View>
<View style={styles.registerContainer}>
<MainButton style={styles.registerButton}>Register now</MainButton>
</View>
</View>
</ImageBackground>
);
};
WelcomeScreen.navigationOptions = {
headerLeft: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item title="Menu" iconName="ios-menu" />
</HeaderButtons>
),
};
Thank you!
