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

user_12353069 0
Viewed 2365

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>
  )
react-navigation react-native
2 Answers

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>
    </>
  );
};
user_97203140

i may be late but here is my solution

you need to add tab navigator to stack.screen

example from my code: MyTabsStack()

    function MyTabsStack() {

  return (
    <Stack.Navigator initialRouteName="MyTabs">
      <Stack.Screen name="Offers"  component={MyTabs} options={({route, navigation}) => ({
            title: "My Offers",
              headerTintColor: '#fff',
              headerTitleStyle: {
                fontWeight: 'bold',
                borderBottomWidth:0,
                alignSelf: 'center'
                
              }
            })} />
    </Stack.Navigator>
  );
}

MyTabs()

function MyTabs() {

const toptabBarOptions = { 
  style: { backgroundColor: '#fff'},
  labelStyle: { fontSize:18 },
  indicatorStyle: {backgroundColor: '#2099AF',},
  activeTintColor: '#2099AF',
 inactiveTintColor: 'gray',
}


  return (
    <Tabtop.Navigator tabBarOptions={toptabBarOptions}>
      <Tabtop.Screen name="Selling" component={Offers} />
      <Tabtop.Screen name="Buying" component={Boards} />
      <Tabtop.Screen name="Boards" component={Boards} />

    </Tabtop.Navigator>
  );
}
user_10507900
Related