icon in component header is not showing - react-native

Question

I am following the doc example here to add a plus + to component header:
import React, { Component} from 'react';
import { SectionList, View, Image, StyleSheet, Text, TouchableOpacity, Platform, TouchableHighlight, AppRegistry } from 'react-native';
import {Icon } from "react-native-elements";
export default class Event extends React.Component {
static navigationOptions = ({navigation}) => {
console.log("in event header");
return {
headerTitle: 'Event',
headerRight: (
<TouchableOpacity>
<Icon
name="plus"
size={30}
type='octicon'
onPress={navigation.getParam('navToNewEvent')}
/>
</TouchableOpacity>
),
};
}
_navToNewEvent = () => {
console.log("Route to new event");
this.props.navigation.navigate("NewEvent");
};
async componentDidMount(){
this.props.navigation.setParams({ navToNewEvent: this._navToNewEvent })
....
}
However the plus + is not showing in component header:
What is missing in my code above?
UPDATE: the navigation code before component Event is:
return createBottomTabNavigator(
{
Event: {screen: EventStack},
Group: {screen: GroupStack},
Contact: {screen: ContactStack},
}, bottomTabNavOptions
);
const bottomTabNavOptions = {
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
console.log("route name", routeName);
let iconName;
if (routeName === 'Event') {
iconName = `list-unordered`;
} else if (routeName === 'NewEvent') {
iconName = "kebab-horizontal";
} else if (routeName === 'NewUser') {
iconName = `person`;
} else if (routeName === 'ListUser') {
iconName = `organization`
}
return <Icon name={iconName} size={30} color={tintColor} type='octicon' />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
};
const EventStack = createStackNavigator({
Event: {
screen: EventWithSelf,
navigationOptions: {
title: 'Event',
},
},
NewEvent: {
screen: NeweventWithSelf,
navigationOptions: {
title: 'New Event',
},
},
EditEvent: {
screen: EditEventWithSelf,
navigationOptions: {
title: 'Edit Event',
},
},
Chat: {
screen: ChatWithSocket,
navigationOptions: {
title: 'Chat',
},
},
});

Answer 1

Simply looking at the code doesn't seem wrong. There is one catch. Would you like to modify this?
static navigationOptions = ({navigation}) => {
console.log("in event header");
return {
title: 'Event',
headerRight: (
<TouchableOpacity>
<Icon
name="plus"
size={30}
type='octicon'
onPress={() => navigation.getParam('navToNewEvent')}
/>
</TouchableOpacity>
),
};
}
You can use defaultNavigationOptions
The Event tab you represent is not a single screen. As a common header, configure the title and button in defaultNavigationOptions.
defaultNavigationOptions: ({ navigation }) => ({
...
headerTitle: 'Event',
headerRight: (
<TouchableOpacity>
<Icon
name="plus"
size={30}
type='octicon'
onPress={navigation.getParam('navToNewEvent')}
/>
</TouchableOpacity>
),