Am not understanding what is missing for TypeScript Drawer component

user_4203814 0
Viewed 253

I am new to TypeScript and have been trying to learn as I continue to build an application.

The error I am seeing within VSCode is:

Type '{ state: DrawerNavigationState<ParamListBase>; navigation: DrawerNavigationHelpers; descriptors: DrawerDescriptorMap; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)

This error appears from CustomDrawerContent

The way my code is currently implemented is:

const Drawer = createDrawerNavigator<RootDrawerParamList>();

const CustomDrawerContent = () => {
  return (
    <SafeAreaView>
      <Text>Hellow</Text>
    </SafeAreaView>
  );
};

const DrawerNavigation = () => {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}
    >
      <Drawer.Screen name="RootDrawer" component={LandingStackNavigation} />
    </Drawer.Navigator>
  );
};

export default DrawerNavigation;

The type I created for this was RootDrawerParamList. Which is:

export type RootDrawerParamList = {
  RootDrawer: DrawerScreenProps<LandingStackParamList>;
};

What am I missing about this one? Thank you for helping me understanding how I should approach this type of error

react-navigation react-native typescript
2 Answers

You're passing {...props} to CustomDrawerContent but it doesn't accept any props in your code (const CustomDrawerContent = () => {).

The type I created for this was RootDrawerParamList. Which is:

That's unrelated but that's also incorrect. You need to specify types for any params you accept for the screen, but you have specified types for props for the screen. Params and props aren't the same thing.

user_16650260

Which version of react-navigation are you using.

The type definition in the version I am using is:

export function createDrawerNavigator(
  routeConfigMap: NavigationRouteConfigMap,
  drawerConfig?: DrawerNavigatorConfig
): NavigationContainer;
user_59054660
Related