I have the following navigation config file. This config file use react navigation to create navigators. My question is how can i call a function from my navigation config file that is define is another component such as a separate screen competent. In the below code i want to be able to call the showAlert() from the header button of the Map route. Please note that the showAlert() is define in the Map screen component below my navigator config.
const Tabs = createBottomTabNavigator ({
Map:{screen:MapScreen},
Profile:{screen:ProfileScreen},
Consent: { screen: ConsentScreen },
},
{
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}
}
);
Tabs.navigationOptions = ({ navigation }) => {
const { routes, index } = navigation.state;
const navigationOptions = {};
if (routes[index].routeName === 'Map') {
navigationOptions.headerRight= (
<Button
onPress={routes.showAlert()}
title="Search"
color="#009688"
backgroundColor="white"
icon={{name:'search',color:'#009688'}}
/>
);
}
if (routes[index].routeName === 'Profile') {
navigationOptions.headerRight= (
<Button
onPress={()=> navigation.navigate('settingaccount')}
title="Settings"
color="#009688"
backgroundColor="white"
icon={{name:'settings',color:'#009688'}}
/>
);
navigationOptions.headerLeft= (
<Button
onPress={()=> navigation.navigate('profileEdit')}
title="Edit Profile"
icon={{name:'account-circle',color:'#009688'}}
color="#009688"
backgroundColor="white"
color="#009688"
/>
);
}
if(routes[index].routeName === 'Consent'||routes[index].routeName === 'Map'){
navigationOptions.headerLeft= null
}
return navigationOptions;
}
//Screen component
class Map extends React.Component {
showAlert() {
Alert.alert('No Internet',
'Check internet connection',
[
{ text: 'OK', onPress: () => console.log('OK Pressed') },
],
{ cancelable: false }
)
}
render() {
return (
<View />
);
}
}