Navigate to first tab on back button

Ionic Framework Ionic Vue
1

Hi everybody,

I am currently building an app which has 3 different tabs. Let’s say ‘Home’, ‘Statistics’ and ‘Settings’.

I would like to change the “default navigation” system of the tabs a little.
Indeed, when clicking the back button in the tabs I would like to obtain the following behavior :

  1. Clicking on the back button in the ‘Home’ page will simply leave (exit) the app.
  2. Clicking on the back button in either the ‘Statistics’ page, or the ‘Settings’ page will always navigate directly back to the ‘Home’ page. For better understanding, please look into the Android Twitter app.

Now for the first point listed above I have already managed to achieve it.

I have, however, not found a solution to the second point. I have read in the doc that, considering the underlying navigation stack behind each tab, it is bad practice to route from a tab to another tab manually. But does it mean the navigation behavior cannot be customed at all ?

I am willing to be told this is not a good navigation practice and to it differently. But having spent so much time trying to find a way, I am now genuinely interested to know if it is even possible.

Thanks in advance for any help !

EDIT: missing word, clarity

2

Need more clarification here. Are you talking about the back button place at the bottom of android devices? or back button from within a screen in your app.

Also you need to show example code reproducing your issue. Stackblitz is a good place to do so, just post project link here and we can take a look.

3

Thank you very much for your answer.

Yes I am talking about the back button which is placed at the bottom of android devices.

Regarding the code, I currently just have the simple tabs start project. My only issue is that the “default” navigation behavior, when clicking the back button on tabs, does not fit what I listed. I have spent a certain amount of time looking for potential solutions, but have come up empty.

Do you think I should I still prepare a piece of code ?

4

Yes. I found this on the docs that can maybe point you in the right direction: Hardware Back Button for Capacitor & Cordova on Android Devices