Ionic 4: Example of `<ion-nav>` together with React

Hi, could anyone provide an example … or knows of how React works with this component (ion-nav, and ion-nav-push). The example provided is pure javascript. I basically want navigation in a modal that is independent of the main react router. From the component docs description, this is exactly what its for. But i need some guidance. Many thanks, Wes

2 Likes

can you be more specific? what does “navigation in a modal” mean from a user experience?

Hi Aaron,

I pretty much want the exact behaviour that is shown in the example provided
https://ionicframework.com/docs/api/nav.
But as a React example.

From a user experience perspective, the modal is be invoked to edit a user setting from a list. However one of the settings is a two step process, so I thought this would be good way to do it … using ion nav to push the view of the second step. If that makes sense. The main thing is that it is independent of the core router, as I found it gets messy otherwise with the history when navigating back to the original settings page.

In the docs it says
“This fits use cases where you could have a modal, which needs it’s own sub-navigation, but not make it tied to the apps URL.”

4 Likes

Looking for this as well, any ion-nav examples for React would be much appreciated. Thanks!

3 Likes

Did you find an example for this? @topcatcreatives @charlesyeo92

@Pauly I left it in the end, and just added a few ‘if’ conditions in the component template to control the sub navigation options. Not ideal as would have liked the built in nav transitions etc.

I’m looking for this as well. Will this be supported in Ionic 5?

My workaround is to continue to push more and modals. This kinda works, but the transition is not the one I want on iOS and I have to implement my own back button.