bug: react, IonTabBar does not allow for wrapped IonTabButton components

Bug Report: Importing outer IonTabButton into IonTabBar does not render in React.

Ionic version: [x] 5.x (React)

Current behavior: I am following the docs on creating the tabbar with tab buttons which works perfectly:

const Tabs = () => {
  return (
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Routes />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="settings" href="/settings">
            <IonIcon icon={cog} />
            <IonLabel>Settings</IonLabel>
          </IonTabButton>
          <IonTabButton tab="Login" href="/login">
            <IonIcon icon={triangle} />
            <IonLabel>Login / Register</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  )
}

Renders like it is supposed to:

I particularly like breaking down components a bit more, so let’s start with just one file:

// SettingsTab.tsx
import { IonIcon, IonLabel, IonTabButton } from "@ionic/react"
import { cog } from "ionicons/icons"

export const SettingsTab = () => (
  <IonTabButton tab="settings" href="/settings">
    <IonIcon icon={cog} />
    <IonLabel>Settings</IonLabel>
  </IonTabButton>
)

And import it and use it on my Tabs.tsx:

const Tabs = () => {
  return (
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Routes />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <SettingsTab />
          <IonTabButton tab="Login" href="/login">
            <IonIcon icon={triangle} />
            <IonLabel>Login / Register</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  )
}

Expected behaviour:

Now I would expect the behaviour to be the same as the previous one when I declared all buttons directly inside the Tabs, but this is what I am getting instead:

Steps to reproduce:

• Install the latest Ionic React
• Start a Tabs application
• Create a new component that exports a single tab button, for example:

  export const SettingsTab = () => (
    <IonTabButton tab="settings" href="/settings">
      <IonIcon icon={cog} />
      <IonLabel>Settings</IonLabel>
    </IonTabButton>
  )
  

• import that component into the tabs and place it within <IonTabBar></IonTabBar>

Thanks

[liamdebeasi]

Thanks, I can reproduce this issue. The problem is that when IonTabBar renders its child components, it filters out anything that is not IonTabButton: https://github.com/ionic-team/ionic-framework/blob/master/packages/react/src/components/navigation/IonTabBar.tsx#L221

[aleksei-tro]

Facing the same issue at the moment. Does anybody know of a workaround?