Ionicons is refered as type (Typescript), but not value

[chapman-cc]

Bug: I use Ionicons in stack navigator options headerLeft property, as to return the Icon as JSX, but typescript thought it was a type I am not sure if this bug is a vector-icon bug or a typescript bug

I'm writing a createStackNavigator from @react-navigation/stack where in Stack.Navigator screen options, I tried to separated it to reuse it with another file I added a Ionicons menu at the left side of the nav bar, using a function to return a JSX.Element to property headerLeft but it returns a typescript error, saying I use Ionicons as a type but not as a value I am not sure if this bug is a vector-icon bug or a typescript bug

You can replicate this by downloading these necessary modules first: yarn add @react-navigation/stack @expo/vector-icons @react-navigation/native

then copy below code into a new file (testFile.tsx):

import { StackNavigationOptions } from "@react-navigation/stack";
import { Ionicons } from "@expo/vector-icons";
import { Route } from "@react-navigation/native";

const screenOptions: StackNavigationOptions = ({
  title: 'Home', 
  headerLeft: () => (<Ionicons name='menu' onPress={()=>{}} />)
  // ts error: 'Ionicons' refers to a value, but is being used as a type here. 
  // Did you mean 'typeof Ionicons'?ts(2749)
})

export default screenOptions;

however if I place it along with the Stack Navigator function it doesn't return an error, like so:

import React from "react";
import { Route } from "@react-navigation/native";
import {
  createStackNavigator,
  StackNavigationOptions,
} from "@react-navigation/stack";
import { Ionicons } from "@expo/vector-icons";
import Home from "../screens/Home";

const { Navigator, Screen } = createStackNavigator();

export default function HomeStack() {
  return () => (
    <Navigator screenOptions={screenOptions}>
      <Screen name='Home' component={Home} />
    </Navigator>
  );
}

interface screenOptionsProps {
  navigation: any;
  route: Route<string, object | undefined>;
}

const screenOptions = ({
  navigation,
  route,
}: screenOptionsProps): StackNavigationOptions => ({
  headerLeft: () => (
    <Ionicons
      name="menu"
      onPress={() => navigation.openDrawer()}
      size={30}
      style={{ marginLeft: 16 }}
    />
  ),
});

[brentvatne]

i think this is happening because you are not importing react in a file where you use jsx.

this should fix it:

import React from 'react';
import { StackNavigationOptions } from "@react-navigation/stack";
import { Ionicons } from "@expo/vector-icons";
import { Route } from "@react-navigation/native";

const screenOptions: StackNavigationOptions = ({
  title: 'Home', 
  headerLeft: () => (<Ionicons name='menu' onPress={()=>{}} />)
  // ts error: 'Ionicons' refers to a value, but is being used as a type here. 
  // Did you mean 'typeof Ionicons'?ts(2749)
})

export default screenOptions;