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

[thepedroferrari]

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

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[thepedroferrari]

Here is a reproduction of the issue: https://github.com/thepedroferrari/Ionic-External-Tab

[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

[thepedroferrari]

Nicely found!

[J-Gonzalez]

We're running into this as well, both from trying to componentize creating IonTabButtons (like above example), and also when trying to implement feature flags to conditionally show IonTabButton elements

[shikelong]

some issue.

[DeniKucevic]

Any updates on this? @thepedroferrari did you manage to figure out any solution?

[aleksei-tro]

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

[playaz87]

@liamdebeasi Is there any update to this? I want to create a tab button based on user preference, but I have a lot of options. Therefore it makes sense to wrap the options in their own component and return the appropriate <IonTabButton>

[jonathan-chin]

+1 for this issue. I want to componentize my routing to make it easier to maintain and isolate logic.