4

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;

enter image description here

Ali Mahmoudi
  • 83
  • 2
  • 8
  • Hello Ali! Can you please write the full error message? Your code for Tab Bar looks good. From the error "Error: Element type is invalid: expected a string ...", it looks like an "object" is being supplied to a `` component instead of "string". – Ajay Aug 01 '21 at 17:36
  • Not sure this was a mistake or not the `import Badges from './Badge'` file name is wrong. – Rajendran Nadar Aug 01 '21 at 19:06
  • Hi Ajay, Thank you for your comment. when I change createMaterialTopTabNavigator with createBottomTabNavigator my program work, I want to show my tabs at the top of the screen. **Error:** Element 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' – Ali Mahmoudi Aug 01 '21 at 19:15
  • and error **Check the render method of `MaterialTopTabNavigator`** – Ali Mahmoudi Aug 01 '21 at 19:26
  • I tried to reproduce the above bug and I can confirm it is due to the wrong file name `import Badges from './Badge'` `./Badge` should be `./Badges` – Rajendran Nadar Aug 01 '21 at 19:44
  • I change`./Badge` to `./Badges` but don't work – Ali Mahmoudi Aug 01 '21 at 20:03
  • Can you throw a https://snack.expo.io/ demo, and reproduce the issue in that snack? – Rajendran Nadar Aug 01 '21 at 20:52

2 Answers2

5

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",
Iqbal
  • 2,094
  • 1
  • 20
  • 28
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/material-top-tabs@5.3.15

enter image description here

c) stop and start your proyect and work enter image description here enter image description here

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

Luis Alfonso Ponce
  • 39
  • 4