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;