React navigation drawer content props types definition

user_1731473 0
Viewed 2788

I am creating a custom drawer content using this guide:

const DrawerContent = (props) => (
  <DrawerContentScrollView {...props}>
    <AntDesign
      name="close"
      size={32}
      onPress={() => props.navigation.closeDrawer()}
    />
    <Text>TEST</Text>
    <DrawerItemList {...props} />
  </DrawerContentScrollView>
);

It works well, but I would like type checking on the props parameter. So I tried:

import { DrawerContentComponentProps } from '@react-navigation/drawer';

const DrawerContent = (props: DrawerContentComponentProps) => (
  // Same stuff
);

But my IDE is now telling me that props.navigation.closeDrawer does not exist, but it does.

What is the correct way to define the props type of the DrawerContent function?

react-navigation react-native typescript reactjs
1 Answers

This is a know issue of react-navigation library: https://github.com/react-navigation/react-navigation/issues/6790

In order to make the warning disappear waiting the fix, you can use this notation:

import { DrawerActions } from '@react-navigation/native';


<AntDesign
  name="close"
  size={32}
  // @see https://github.com/react-navigation/react-navigation/issues/6790
  onPress={() => navigation.dispatch(DrawerActions.closeDrawer())}
/>
user_17314730
Related