Can't show custom header in tabNavigator - reactjs

Question

I can't show my custom header with static navigation options. It's only TabNavigator on my Title. What should I do?
This is my HomeScreen Component;
export default class Home extends Component {
static navigationOptions = ({navigation}) => ({
title: 'MENEMENOYS',
headerLeft : (
<TouchableOpacity
onPress={() => {
AuthStore.LogOut().then(() => {
navigation.navigate('LoginPage');
});
}}>
<Icon
name="md-log-out"
size={30}
color={'white'}
style={{marginLeft:10}}
/>
</TouchableOpacity>
)
})
And this is my router : stack navigator with tab navigator.
const TabNavigator = createBottomTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon
name="md-home"
size={30}
color={tintColor}
style={styles.homeIcon}
/>
),
},
},
AddNewCar: {
screen: AddNewCar,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon
name="md-add-circle"
size={40}
color={tintColor}
style={styles.addIcon}
/>
),
},
},
OtoparkList: {
screen: OtoparkList,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<IconAwesome name="car" size={30} color={tintColor} />
),
},
},
},
{
tabBarOptions: {
showLabel: false,
activeTintColor: '#41AB5F',
inactiveTintColor: 'white',
style: {
backgroundColor: '#1F202D',
borderTopColor: 'transparent',
},
},
},
);
const AppNavigator = createStackNavigator(
{
TabNavigator: {
screen: TabNavigator,
navigationOptions: {
}
},
LoginPage: {
screen: LoginPage,
navigationOptions: {
headerShown: false,
},
},
ParkingDetail: {
screen: ParkingDetail,
navigationOptions: {
headerShown: false,
},
},
Print: {
screen: Print,
navigationOptions: {
headerShown: false,
}
}
},
{
initialRouteName: 'LoginPage',
},
);
But my header is not shown. Only Header title:TabNavigator and default back button.
Where am i doing wrong ? Please help me. Thanks.

Answer 1

Hey in React navigation latest version 5.x syntax is changed try following
Take a look at doc here Header buttons
static navigationOptions = ({ navigation }) => {
return {
headerTitle: () =>(
<View>
<Text>MENEMENOYS</Text>
</View>
),
headerLeft: () => (
<TouchableOpacity
onPress={() => {
AuthStore.LogOut().then(() => {
navigation.navigate('LoginPage');
});
}}>
<Icon
name="md-log-out"
size={30}
color={'white'}
style={{marginLeft:10}}
/>
</TouchableOpacity>
),
};
};