How to render a single header component above material top tab navigator?

Question

I am attempting to render a single header above a material top tab navigator that houses two screens. When not rendering the header, the top tab navigator appears at the top of the screen as expected. However, when rendering the custom header component, the tab navigator disappears, but the functionality remains (I can still swipe from the first screen to the second). How can I render both my header and the top tab navigator?

function FeedTabs() {
const TabTop = createMaterialTopTabNavigator();
  return (
    <TabTop.Navigator 
    mode="card" 
    headerMode='screen' 
    initialRouteName='Feed'
    tabBarPosition='top'
    initialLayout={{ width: Dimensions.get('window').width }}
    tabBar= {({navigation, scene}) => 
    <FeedHeader
    title="Feed"
    navigation={navigation}
    scene={scene}
    />}
    >
      <TabTop.Screen name="Videos" component={Feed}/>
      <TabTop.Screen name="Articles" component={FeedArticles}/>
    </TabTop.Navigator>
  )

Answer 1

Just add the header component before the top navigator like below. In my case, my header component is the component named BrandProfileCard

const BrandProfileNavigator = ({props}) => {
 return (
    <>
      <BrandProfileCard />
      <Tab.Navigator
        initialRouteName={appRoutes.BRAND_PROFILE}
        tabBarOptions={{
          labelStyle: {fontSize: 12},
        }}
        {...props}>
        {brandProfileROutes.map(({name, component, options}) => {
          return (
            <Tab.Screen
              name={name}
              component={component}
              key={name}
              options={options}
            />
          );
        })}
      </Tab.Navigator>
    </>
  );
};