bug: IonTabs needs a IonTabBar

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

[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>

[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