Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

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

$
0
0

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;

Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>