bug: React IonTab do not display in mobile client

[TheSoils]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

I want to use tab in my app, and follow the content "working with tabs" in the doc "react navigation" , it is success in broswer, but get blank in ios and android mobile phone

Expected Behavior

success display in mobile client

Steps to Reproduce

1. ionstart a new app
2. follow "working with tabs" in "react navigation"

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/Users/wyman/.nvm/versions/node/v16.19.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.1.0

Capacitor:

Capacitor CLI : 5.0.5
@capacitor/android : 5.0.5
@capacitor/core : 5.0.5
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 1.7.2

System:

NodeJS : v16.19.0 (/Users/wyman/.nvm/versions/node/v16.19.0/bin/node)
npm : 9.6.1
OS : macOS Unknown

Additional Information

if change to in , it display success

[liamdebeasi]

Thanks for the report. What version of the Chromium webview is running on the device that shows the white screen? You can find by this logging window.navigator.userAgent when inspecting the app with Chrome Dev Tools.

[TheSoils]

Thanks for the report. What version of the Chromium webview is running on the device that shows the white screen? You can find by this logging window.navigator.userAgent when inspecting the app with Chrome Dev Tools.

the user agent is 'Mozilla/5.0 (Linux; Android 13; sdk_gphone64_arm64 Build/TE1A.220922.028; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/103.0.5060.71 Mobile Safari/537.36'

[TheSoils]

it is also white in ios

[TheSoils]

Thanks for the report. What version of the Chromium webview is running on the device that shows the white screen? You can find by this logging window.navigator.userAgent when inspecting the app with Chrome Dev Tools.

Change IonRouterOutlet to Switch In App component, it display success。 so can not use IonRouterOutlet in root Component or it is a bug? It seems that this point was not mentioned in guide docs..

[liamdebeasi]

It's hard to say what the issue is without being able to reproduce the issue on my end. Can you provide a GitHub repo with the code required to reproduce the white screen?

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

[TheSoils]

It's hard to say what the issue is without being able to reproduce the issue on my end. Can you provide a GitHub repo with the code required to reproduce the white screen?

https://github.com/TheSoils/ion-tab-test

[liamdebeasi]

Thanks for the reproduction. In Tabs.tsx there is an additional IonPage component. IonTabs adds its own IonPage component, so you do not need to add another one. Removing the IonPage in that file should fix the white screen issue.

[TheSoils]

Thanks for the reproduction. In Tabs.tsx there is an additional IonPage component. IonTabs adds its own IonPage component, so you do not need to add another one. Removing the IonPage in that file should fix the white screen issue.

yes，remove the IonPage in Tabs, it display success, thx!
so it is wrong in the guide doc？
Maybe it is necessary to modify the doc

[liamdebeasi]

Yes, good catch! I opened a PR to fix this on the docs: ionic-team/ionic-docs#3012. I am going to close this since the issue is resolved, but let me know if you have questions.

---

More detail on why this happens for those interested: IonTabs renders a PageManager component: https://github.com/ionic-team/ionic-framework/blob/1f06be4a31965f2a949b4866a585aee6af0af29d/packages/react/src/components/navigation/IonTabs.tsx#L157C14-L157C25

This component renders a div with the ion-page class applied. The IonPage component also renders a PageManager.

IonPage: https://github.com/ionic-team/ionic-framework/blob/1f06be4a31965f2a949b4866a585aee6af0af29d/packages/react/src/components/IonPage.tsx#L27C12-L27C12

PageMananger:

ionic-framework/packages/react/src/routing/PageManager.tsx

Line 75 in 1f06be4

<div className={className ? `${className} ion-page` : `ion-page`} ref={this.stableMergedRefs} {...props}>

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