0

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

screenshot of error

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

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

1 Comment

This right here. Just bumped down material-top-tabs from 6.x to 5.x and it worked perfectly.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.