b7b383bee0
Issue number: resolves #29885, resolves #29924 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> React and Vue: Tab bar could be a standalone element within `IonTabs` and would navigate without issues with a router outlet before v8.3: ```tsx <IonTabs> <IonRouterOutlet></IonRouterOutlet> <IonTabBar></IonTabBar> </IonTabs> ``` It would work as if it was written as: ```tsx <IonTabs> <IonRouterOutlet></IonRouterOutlet> <IonTabBar slot="bottom"> <!-- Buttons --> </IonTabBar> </IonTabs> ``` After v8.3, any `ion-tab-bar` that was not a direct child of `ion-tabs` would lose it's expected behavior when used with a router outlet. If a user clicked on a tab button, then the content would not be redirected to that expected view. React only: Users can no longer add a `ref` to the `IonRouterOutlet`, it always returns undefined. ``` <IonTabs> <IonRouterOutlet ref={ref}> <IonTabBar slot="bottom"> <!-- Buttons --> </IonTabBar> </IonTabs> ``` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> The fixes were already reviewed through PR https://github.com/ionic-team/ionic-framework/pull/29925 and PR https://github.com/ionic-team/ionic-framework/pull/29927. I split them to make it easier to review. React and Vue: The React tabs has been updated to pass data to the tab bar through context instead of passing it through a ref. By using a context, the data will be available for the tab bar to use regardless of its level. React only: Reverted the logic for `routerOutletRef` and added a comment of the importance of it. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> N/A
@ionic/react
These are React specific building blocks on top of @ionic/core components/services.
To get started, install the Ionic CLI by running npm i -g @ionic/cli. Then, start a new Ionic React Project by running ionic start myapp --type=react.
Publishing a Native Application
You can now make use of all of the ionic components in your React application. If you want to publish your app to the App Store or Google Play you will need to use the ionic cli to execute Capacitor commands to do so.
More information on this can be found here. https://ionicframework.com/docs/cli If you want to learn more about Capacitor our dedicated site can be found here. https://capacitor.ionicframework.com/
The commands that you will need to execute are below in your project's root.
ionic init "My React App" --type=react
ionic integrations enable capacitor
Then run the following command to get started with either ios or android platforms.
ionic capacitor add <android|ios>
After build you build your app you will need to copy your capacitor resources into the build dir so execute the following command.
ionic capacitor copy
To open your application to build/emulate in Android Studio or Xcode run the open command.
ionic capacitor open <android|ios>