[Typescript]: Vector icons can not be used with React Navigation

[abhishek6262]

When trying to use Vector icons with React Navigation they're resulting into an error in Typescript but they are working absolutely fine in Javascript. Typescript says, "'FontAwesome' refers to a value, but is being used as a type here .ts(2749)" in the tabBarIcon. Not sure what could be the issue seems to be the type definition problem, therefore, I'm dropping down the sample code below.

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { FontAwesome, MaterialIcons } from '@expo/vector-icons';
import { EXPLORE, HOME, PROFILE } from './screen_names';
import Home from '../modules/home/container';

const TabNavigatorIconSize = 30;

const Navigation = createBottomTabNavigator(
  {
    [HOME]: {
      screen: Home,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) =>
          (<FontAwesome name="home" size={TabNavigatorIconSize} color={tintColor} />)
      }
    },
    [EXPLORE]: {
      screen: Home,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) =>
          (<MaterialIcons name="explore" size={TabNavigatorIconSize} color={tintColor} />)
      }
    },
    [PROFILE]: {
      screen: Home,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) =>
          (<FontAwesome name="user-circle-o" size={TabNavigatorIconSize} color={tintColor} />)
      }
    },
  },
  {
    initialRouteName: HOME,
    tabBarOptions: {
      inactiveTintColor: '#000',
      showLabel: false,
      style: {
        borderTopColor: 'transparent',
        elevation: 4,
        height: 60,
        shadowColor: '#F2F2F2',
      }
    }
  }
);

export const Navigator = createAppContainer(Navigation);

[falquinho]

Had the same problem. Solution was to change the file extension from .ts to .tsx