CODEWITHSUNDEEP
typescriptreact-navigationreact-native-navigationreact-navigation-drawerreact-navigation-v6
Wisam Jbori
Wisam Jbori

Reputation: 109

The Correct Way to Type React Navigation Drawer

WHat's the correct way to type RNavigation, currently I am doing this on The App

export type DrawerNavigatorType = {
  Store: unknown;
  ImagesStudio: { images: string[] }; //
};

const Drawer = createDrawerNavigator();

const DrawerNavigator = () =>  (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Store"
        component={StoreNavigator}
      />
      <Drawer.Screen
        name="ImagesStudio"
        component={ImageStudioScreen}
      />
    </Drawer.Navigator>
  );

and in the screen

type Prop = DrawerScreenProps<DrawerNavigatorType, "ImagesStudio">;

but I keep getting

Type '({ navigation, route }: Prop) => React.JSX.Element' is not assignable to type 'ScreenComponentType<ParamListBase, "ImagesStudio"> | undefined'.
  Type '({ navigation, route }: Prop) => React.JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type '{}' is missing the following properties from type 'Prop': navigation, routets(2322)
types.d.ts(318, 5): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & RouteConfig<ParamListBase, "ImagesStudio", DrawerNavigationState<ParamListBase>, DrawerNavigationOptions, DrawerNavigationEventMap>'

Anyone knows what I am doing wrong?

Upvotes: 0

Views: 371

Answers (1)

Wisam Jbori
Wisam Jbori

Reputation: 109

Fixed by changing

const Drawer = createDrawerNavigator();

to

const Drawer = createDrawerNavigator<DrawerNavigatorType>();

Upvotes: 0

Related Questions