Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Typescript type for NativeStack header nested in a DrawerNavigator

$
0
0

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>)

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>