Using React Navigation 6, I'm trying to type the header
option for a Stack.Screen
. As it is nested in a DrawerNavigator
, I can use navigation.openDrawer()
, but this is not defined in the expected type NativeStackHeaderProps
. If I use DrawerHeaderProps
, it'll complain that a header
option from a Stack.Screen should be a NativeStackHeaderProps
.
Is there any way to type the header
option when nested in a Drawer like this ?
Thanks in advance !
Code sample below:
const Drawer = createDrawerNavigator<RootDrawerParamList>()const AppDrawerNavigator = () => { return (<Drawer.Navigator initialRouteName="ChecklistsNavigator" screenOptions={{ headerShown: false }}><Drawer.Screen name="ChecklistsNavigator" component={ChecklistsStackNavigator} /></Drawer.Navigator> )}// In this component, navigation.openDrawer will throw a typescript error as `openDrawer` is not defined in NativeStackHeaderPropsconst ChecklistsHeader = ({ navigation }: NativeStackHeaderProps) => { return (<TouchableOpacity onPress={() => navigation.openDrawer()} name="menu" size={24} color="black">… )}const ChecklistsStackNavigator = () => (<Stack.Navigator initialRouteName="Checklists"><Stack.Screen name="Checklists" options={{ header: ChecklistsHeader }} component={Checklists} /></Stack.Navigator>)