correct compnents passed yet React Native Error: Element type is invalid: expected a string or a class/function but got: undefined

Question

See below error I get In my React Native project

 ERROR  Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at MaterialTopTabView.tsx:51.
    in MaterialTopTabView (at createMaterialTopTabNavigator.tsx:44)
    in MaterialTopTabNavigator (at AuthTabs.js:14)

see screenshot

See the code below

AuthTabs.js

import React from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

import SignIn from './tabs/SignIn';
import SignUp from './tabs/SignUp';

const Tab = createMaterialTopTabNavigator();

export default function AuthTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="SignIn"
        component={SignIn}
        options={({}) => ({
          tabBarLabel: 'Sign In',
        })}
      />
      <Tab.Screen
        name="SignUp"
        component={SignUp}
        options={({}) => ({
          tabBarLabel: 'Sign Up',
        })}
      />
    </Tab.Navigator>
  );
}

SignIn

import React from 'react';
import {View, Text} from 'react-native';

export default function SignIn() {
  return (
    <View>
      <Text>Singn In Screen</Text>
    </View>
  );
}

SignUp

import React from 'react';
import {View, Text} from 'react-native';

export default function SignUp() {
  return (
    <View>
      <Text>Sign Up Screen </Text>
    </View>
  );
}

I have checked all similar questions but no suitable solution anywhere Please advise me on how this issue can be fixed Thanks

Answer 1

Maybe your material-top-tab's major version is not aligned with react-navigation.

Run this command if you are using 5.x

yarn add @react-navigation/material-top-tabs@^5.x react-native-tab-view@^2.x

Or you may upgrade react-navigation to 6.x