My React Native app structure is as follows: a Drawer navigator, which contains a BottomTabNavigator, which itself contains 3 tabs (each of them Stack navigators). My issue comes when trying to pass the drawer navigation prop to one of the BottomTabNavigator stacks. I am trying to pass it to a custom component in the headerLeft of one of my Stacks, however I get an "Undefined is not an object" when calling navigation.openDrawer within the headerLeft component.
App.js
<NavigationContainer ref={containerRef} initialState={initialNavigationState}><Drawer.Navigator><Drawer.Screen name="Feed" component={BottomTabNavigator} options={{swipeEnabled: false}} /><Drawer.Screen name="Settings" component={SettingsStack} options={{swipeEnabled: false}} /></Drawer.Navigator></NavigationContainer>BottomTabNavigator.js
const BottomTab = createBottomTabNavigator();function HomeStack({ navigation }) { return (<MyHomeStack.Navigator screenOptions={{headerShown: true, headerLeft: ({navigation}) => <HamburgerIcon {...navigation} /> }}><MyHomeStack.Screen name="home" component={HomeScreen}/></MyHomeStack.Navigator> );{...MessageStack Code}{...ProfileStack Code}export default function BottomTabNavigator({ navigation, route }) {return (<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME} ><BottomTab.Screen name="Home" component={HomeStack} options={{title: 'Feed'}} /><BottomTab.Screen name="Messages" component={MessagesStack} options={{title: 'Messages'}} /><BottomTab.Screen name="Profile" component={ProfileStack} options={{title: 'Profile'}} /></BottomTab.Navigator> );}HamburgerIcon.js
function HamburgerIcon(navigation) { return (<TouchableOpacity style={{ width: 30, height: 30, marginLeft: 10 }} onPress={(navigation) => navigation.openDrawer()} ><SafeAreaView style={{alignSelf: "center"}}><Ionicons name='ios-menu' size={28} color='#000000'/></SafeAreaView></TouchableOpacity> );}export default HamburgerIcon;