React Navigation Typescript namespace not found

Question

When I'm trying to create any navigator( tab/ stack/ drawer) I get this typescript error: Cannot find namespace 'Tab' even when it's defined in the file itself. What's the problem and what's the solution? I've used the expo typescript template to begin.

Code:

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from "react";

type bottomTabParams = {};

const Tab = createBottomTabNavigator<bottomTabParams>();

const MyTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" />
      <Tab.Screen name="Settings" />
    </Tab.Navigator>
  );
};

export default MyTabs;

Code with error:

Dependencies

"dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.9.1",
    "@react-navigation/drawer": "^5.9.2",
    "@react-navigation/native": "^5.7.5",
    "@react-navigation/stack": "^5.9.2",
    "expo": "~39.0.2",
    "expo-status-bar": "~1.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "react-native-elements": "^2.3.2",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "react-native-web": "~0.13.7",
    "typescript": "~3.9.5"
  },
  "private": true

Answer 1

Have you tried using the .tsx extension instead of .ts ? I had the same issue and this was my problem.