title: How to add a custom component to createMaterialTopTabNavigator tab bar
body: <p>I am using <code>createMaterialTopTabNavigator</code> from <code>react-navigation</code> and trying to customize the tab bar by adding some components on top of it.</p>
  
  <p>As you can see in its guide here:</p>
  
  <p><a href="https://reactnavigation.org/docs/en/material-top-tab-navigator.html#docsNav" rel="noreferrer">https://reactnavigation.org/docs/en/material-top-tab-navigator.html#docsNav</a> </p>
  
  <p>there is an option called <code>tabBarComponent</code> that can be passed to create your own tab bar. However, it completely overrides the tab bar which is not what I want.</p>
  
  <p>I'd like to add a custom component at the top of the tab bar and then have the default tabs with their labels underneath.</p>
  
  <p>Can anyone show me an example of how to add a component to the tab bar please?</p>
  
  <p>For example the code bellow replaces the tabs with <code>My Custom Component</code> text but how can I have both of them? (custom components and tabs) </p>
  
  <pre><code>const myNavigation = createMaterialTopTabNavigator({
    firstTab: FirstTabScreen,
    secondTab: SecondTabScreen,
    thirdTab: ThirdTabScreen,
  },
  {
    tabBarComponent: props =&gt; (
      &lt;View&gt;&lt;Text&gt;My Custom Component&lt;/Text&gt;&lt;/View&gt;
    )
  });
  </code></pre>