Check the render method of `MaterialTopTabNavigator`

Question

I want to create a Top Tab navigator and put two screens Badges.js and Studying.js into Tab when I run it on my device I get an error it says "Error: Element type is invalid: expected a string ..." and "Check the render method of `MaterialTopTabNavigator".

TabScreen.js

import React from 'react';
import {View, Image, Text} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import Badges from './Badge';
import Studying from './Studying';

const Tab = createMaterialTopTabNavigator();

const TabsScreen = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Badges" component={Badges} />
      <Tab.Screen name="Studying" component={Studying} />
    </Tab.Navigator>
  );
};
export default TabsScreen;

Badges.js

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

const Badges = () => {
  return (
    <View>
      <Text>Badges</Text>
    </View>
  );
};

export default Badges;

Studying.js

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

const Studying = () => {
  return (
    <View>
      <Text>Studying</Text>
    </View>
  );
};

export default Studying;

Answer 1

Make sure all the following packages have same version

"@react-navigation/material-top-tabs": "^6.0.1",
"@react-navigation/native": "^6.0.1",
"@react-navigation/stack": "^6.0.1",

Answer 2

I had a similar problem. This is mi solution (npm or yarn don't problem)

a) Unistall more update version 6.0.0

yarn remove react-navigation/material-top-tabs

b) Install this version in my case 5.3.15

yarn add @react-navigation/[email protected]

c) stop and start your proyect and work

d) Continue with the oficial documentation https://reactnavigation.org/docs/material-top-tab-navigator/#example