props.navigation when component is not part of stack navigator - react-native

Question

I have a stackNavigator and DrawerNavigator defined in AppNavigator.js file. It is then imported by App. In AppNavigator, I have a drawer icon to open the sidebar but I can't open it yet because navigate don't exist. I can't pass navigation to AppNavigator sine App component is not part of the stack navigator. I am trying to contain my navigation in one file and still be able to open/close my drawer bar from there. Any help?
AppNavigator.js:
import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import ScreenHome from './screens/member/ScreenHome';
import { createDrawerNavigator } from 'react-navigation-drawer';
import Icon from "react-native-vector-icons/Ionicons";
const authenicatedNavigation = createStackNavigator(
{
Home: {
screen: ScreenHome,
navigationOptions: ({ navigation }) => ({
title: "Home",
drawerLabel: "Home"
})
}
},
{
initialRouteName: "Home",
headerMode: "screen",
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#ffffff',
elevation: 0,
shadowOpacity: 0
},
headerTintColor: '#333333',
headerTitleStyle: {
fontWeight: 'bold',
color: '#ffffff'
},
headerLeft: (
<Icon
style={{paddingLeft: 10, color:'white'}}
onPress={()=> navigation.openDrawer()} //-----undefined navigation
name="md-menu"
size={30}
/>
)
}
}
)
const MainDrawer = createDrawerNavigator(
{
MainTabs: authenicatedNavigation,
},
{
hideStatusBar : false,
drawerBackgroundColor: 'rgba(255,255,255,0)',
overlayColor : '#f68873',
contentOptions: {
activeTintColor: '#fff',
activeBackgroundColor: '#6b52ae'
}
}
);
const App = createSwitchNavigator({
App: {
screen: MainDrawer,
}
});
const AppNavContainer = createAppContainer(
App,
{
initialRouteName: 'App',
}
);
export default AppNavContainer;
App.js:
import React , {Component} from 'react';
import { StyleSheet, View } from 'react-native';
import AppNavContainer from './AppNavigator';
import NavigationService from './shared/NavigationService';
import {axios} from './shared/httpinterceptor';
export default class App extends Component {
constructor(){
super();
}
render() {
return (
<View>
<AppNavContainer
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</View>
);
}
}
Currently, in ScreenHome file, I can open the drawer by:
<Button onPress={this.props.navigation.openDrawer} title="Open"/>
Given I have no access to props.navigation in Apps, how do I open the drawer from AppNavigator?

Answer 1

defaultNavigationOptions (as well as navigationOptions) can be defined as a function which receives the navigation instance as parameter, so you'd just need to update your defaultNavigationOptions as follows:
defaultNavigationOptions: ({navigation}) => ({
headerStyle: {
backgroundColor: '#ffffff',
elevation: 0,
shadowOpacity: 0
},
headerTintColor: '#333333',
headerTitleStyle: {
fontWeight: 'bold',
color: '#ffffff'
},
headerLeft: (
<Icon
style={{paddingLeft: 10, color:'white'}}
onPress={()=> navigation.openDrawer()}
name="md-menu"
size={30}
/>
)
})