Question 183844 in React native Question posted in
The official React Native documentation can be found here.

How to use a static top bar in my react native expo app with a bottom nav bar as well?

I am using react-navigation, currently I am using the Stack and Bottom Tabs, but I also need a Top Tabs as well.
I see the option of Material Top Tabs, but again as per the rule, I can only use one navigator, any workaround to that?

Basically my top tab will have my logo and cart icon

and bottom tab will have usual home, search and settings

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found the solution make a custom header component and then do this

    <Tab.Navigator
    initialRouteName="Home"
    screenOptions={{
        header: () => <Header />,
    }}
>
    <Tab.Screen
        ...

</Tab.Navigator>;

  2. 0

    You can create a reusable <Header /> component that has the logo and buttons in it.

    Here’s an example usage of a Header component that I’ve used for years:

    <Header
  showLogo
  rightButton={{
     child: HorizontalDotsMenu(30, Colors.Primary),
     onclick: viewCartPressed,
  }}
/>

    You can then place this at the top of each file that needs the Header.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search