title: Check the render method of `MaterialTopTabNavigator`
body: <p>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 <strong>&quot;Error: Element type is invalid: expected a string ...&quot;</strong> and <strong>&quot;Check the render method of `MaterialTopTabNavigator&quot;</strong>.</p>
  <p><strong>TabScreen.js</strong></p>
  <pre><code>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 = () =&gt; {
    return (
      &lt;Tab.Navigator&gt;
        &lt;Tab.Screen name=&quot;Badges&quot; component={Badges} /&gt;
        &lt;Tab.Screen name=&quot;Studying&quot; component={Studying} /&gt;
      &lt;/Tab.Navigator&gt;
    );
  };
  export default TabsScreen;
  </code></pre>
  <p><strong>Badges.js</strong></p>
  <pre><code>import React from 'react';
  import {View, Image, Text} from 'react-native';
  
  const Badges = () =&gt; {
    return (
      &lt;View&gt;
        &lt;Text&gt;Badges&lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  export default Badges;
  </code></pre>
  <p><strong>Studying.js</strong></p>
  <pre><code>import React from 'react';
  import {View, Image, Text} from 'react-native';
  
  const Studying = () =&gt; {
    return (
      &lt;View&gt;
        &lt;Text&gt;Studying&lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  export default Studying;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/K1j79.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K1j79.jpg" alt="enter image description here" /></a></p>