React Native + Typescript: How to use toggleDrawer in a stack screen component?

Viewed 695

My question is simple: what should be the type of navData?

I'd like to toggle the drawer from the header of a stack screen component but Typescript is complaining because toggleDrawer doesn't exist on navData.navigation as this component is a stack screen component. I'd like to avoid doing navData: any so what should be the good type?

import React from "react";
import { View, Text, Platform } from "react-native";
import {
  NavigationStackScreenComponent,
  NavigationStackOptions
} from "react-navigation-stack";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import CustomHeaderButton from "../../components/UI/HeaderButton";

const ProductsOverviewScreen: NavigationStackScreenComponent = props => {
  return (
    <View>
      <Text>ProductsOverviewScreen</Text>
    </View>
  );
};

ProductsOverviewScreen.navigationOptions = (
  navData // What is the type?
): NavigationStackOptions => {
  return {
    headerTitle: "All Products",
    headerLeft: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Menu"
          iconName={Platform.OS === "android" ? "md-menu" : "ios-menu"}
          onPress={() => navData.navigation.toggleDrawer()}
        />
      </HeaderButtons>
    ),
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Cart"
          iconName={Platform.OS === "android" ? "md-cart" : "ios-cart"}
          onPress={() => navData.navigation.navigate({ routeName: "Cart" })}
        />
      </HeaderButtons>
    )
  };
};

export default ProductsOverviewScreen;
1 Answers

A quick and dirty way may be to tweak it slightly so that you can type the function itself, rather than just the props: ProductsOverviewScreen.navigationOptions: NavigationStackScreenComponent["navigationOptions"] = (navData) =>.... Can't guarantee it would work though.

A much better option would be to import the correct prop from the library if you can (if no luck in the docs check the repo and see what types are exported for you to use).

Related