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;
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",