Header icon navigation not working on react navigation (React Native) - react-native

Question

My React Native application consists of a TabNavigator that is nested inside of a StackNavigator, which is the entry point of the app's routing.
In the StackNavigator I have also a screen for About, which I want to be shown when an Icon in the header is clicked. The TabNavigator works as expected, however clicking the icon does nothing and does not produce any error. Does anyone have an idea what I am missing?
This is the code:
import { Icon } from 'native-base';
import React, { Component } from 'react';
import { createTabNavigator, createStackNavigator } from 'react-navigation';
import { View } from 'react-native';
import HomeTab from './tabs/HomeTab';
import HistoryTab from './tabs/HistoryTab';
import AboutScreen from './AboutScreen';
export default class Main extends Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: 'Find Phone Country',
headerStyle: {
backgroundColor: '#C62828'
},
headerMode: 'screen',
headerTintColor: '#FFFFFF',
headerTitleStyle: {
fontWeight: 'bold',
justifyContent: 'space-between',
alignSelf: 'center',
textAlign: 'center',
flex: 1,
flexGrow: 1
},
headerRight: (
<Icon
name="ios-help-circle-outline"
style={{ paddingRight: 16, color: 'white' }}
onPress={() => navigation.navigate('About')}
/>
),
headerLeft: <View />
};
};
render() {
return <RootStack />;
}
}
const MainTabNavigator = createTabNavigator(
{
Home: {
screen: HomeTab
},
History: {
screen: HistoryTab
}
},
{
animationEnabled: true,
swipeEnabled: true,
tabBarPosition: 'bottom',
tabBarOptions: {
showIcon: true,
showLabel: true,
upperCaseLabel: false,
allowFontScaling: true,
indicatorStyle: {
opacity: 0
},
style: {
backgroundColor: '#C62828'
},
activeTintColor: '#ffffff',
inactiveTintColor: '#e0e0e0'
}
}
);
const RootStack = createStackNavigator({
Main: {
screen: MainTabNavigator,
navigationOptions: () => ({
title: 'Main',
headerBackTitle: null,
header: null
})
},
About: {
screen: AboutScreen,
navigationOptions: () => ({
title: 'About',
headerBackTitle: 'Back'
})
}
});
Thank you

Answer 1

Icon from native-base doesn't have a prop named onPress. Try encapsulating your icon inside a proper component for capturing the touch, like:
headerRight: (
<TouchableWithoutFeedback onPress={() => navigation.navigate('About')}>
<Icon
name="ios-help-circle-outline"
style={{ paddingRight: 16, color: 'white' }}
/>
</TouchableWithoutFeedback>
),
and don't forget, on your imports:
import { View, TouchableWithoutFeedback } from 'react-native';