bug: IonTabs needs a IonTabBar

[TylerBurnett]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x React

Current behavior:
Conditionally rendering IonTabBar throws error.

Expected behavior:
As commented in the error caller, the error is unnecessary and should be removed.

Location: /IonTabs.tsx:100
if (!tabBar) {
   // TODO, this is not required
 throw new Error('IonTabs needs a IonTabBar');
}

Steps to reproduce:

1. Create a project with IonTabs and React,
2. Comment out the IonTabBar.

Related code:
Example conditional renderer:

const showTabNav = false;

...
<IonTabs>
 <IonRouterOutlet>
...
</IonRouterOutlet>
 {showTabNav && (
            <IonTabBar slot="bottom">
              <IonTabButton tab="tab1" href="/tab1">
                <IonIcon icon={mapOutline} />
                <IonLabel>Explore</IonLabel>
              </IonTabButton>
              <IonTabButton tab="tab2" href="/tab2">
                <IonIcon icon={homeOutline} />
                <IonLabel>Deals</IonLabel>
              </IonTabButton>
              <IonTabButton tab="tab3" href="/tab3">
                <IonIcon icon={walletOutline} />
                <IonLabel>Wallet</IonLabel>
              </IonTabButton>
            </IonTabBar>
          )}
</IonTabs>

Other information:
N/A

Ionic info:
N/A

[TylerBurnett]

Heres a workaround:

<IonTabBar slot="bottom" style={showTabNav ? {} : {display: 'none'}}>

[damienromito]

Probably from the same behaviour, I cannot override the component with styled-components ?https://stackoverflow.com/questions/63794449/how-to-override-the-style-of-an-ionic-component-with-styled-components/63795976#63795976

[ptmkenny]

I also got this error when I tried to move my <IonTabBar> into a component and call that component in the same location.

For example, based on the related code above:

<IonTabs>
 <IonRouterOutlet>
 </IonRouterOutlet>
 <AppTabBar />
</IonTabs>

And then the AppTabBar component:

            <IonTabBar slot="bottom">
              <IonTabButton tab="tab1" href="/tab1">
                <IonIcon icon={mapOutline} />
                <IonLabel>Explore</IonLabel>
              </IonTabButton>
              <IonTabButton tab="tab2" href="/tab2">
                <IonIcon icon={homeOutline} />
                <IonLabel>Deals</IonLabel>
              </IonTabButton>
              <IonTabButton tab="tab3" href="/tab3">
                <IonIcon icon={walletOutline} />
                <IonLabel>Wallet</IonLabel>
              </IonTabButton>
            </IonTabBar>

[jay-babu]

I am getting this error. Please fix

[piotr-cz]

@ptmkenny

The problem is that the IonTabs component checks if at least one it's direct children is type of IonTabBar (see https://github.com/ionic-team/ionic-framework/blob/v5.9.1/packages/react/src/components/navigation/IonTabs.tsx#L131-L138)

Workaround is to create Tab wrapper component which includes both IonTabs and IonTabBar

// TabsWrapper.tsx

const TabWrapper: React.FC<{
  items: IMenuItem[]
}> = ({
  items,
  children,
}) => (
  <IonTabs>
    {children}
    <IonTabBar slot="bottom">
      {items.map((item, index) =>
        <IonTabButton
          key={index}
          tab={index.toString()}
          href={item.url}
        >
          <IonIcon md={item.mdIcon} ios={item.iosIcon} />
          <IonLabel>{item.title}</IonLabel>
        </IonTabButton>
      )}
    </IonTabBar>
  </IonTabs>
)

export default TabWrapper

Usage:

// App.tsx

import TabsWrapper from './TabsWrapper'

const menuItems = [
  // Menu items
]

const App: React.FC = () => (
  <TabsWrapper items={menuItems}>
    <IonRouterOutlet id="main">
      {/** Routes */}
    </IonRouterOutlet>
  </TabsWrapper>
)

export default App

[thetaPC]

Thank you for submitting this issue! This has been resolved through this PR #29868 and was released in v8.3.1.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.