React `ionBackButton` documentation is incorrect or confusing

[leo-petrucci]

Describe the bug I've been trying to fix this bug for the past couple of days now and I was incredibly confused.

I'm using mlynch/nextjs-tailwind-ionic-capacitor-starter and when running on Android I couldn't use the back button to go back between pages as it would just close the app entirely.

So after some searching I found the hardware back button docs page, which seemed pretty straight forward. So I add the suggested React code in my app:

const history = useHistory()

useEffect(() => {
document.addEventListener('ionBackButton', (ev) => {
  ev.detail.register(10, () => {
    history.goBack()
  });
});
}, [])

But after building and testing, going back still closes my app. I Googled and Googled to try and find a solution, but nothing worked.

So I create a new ionic app as described in the docs to see if I can reproduce it, but to my surprise the template app is able to go by itself without any extra code.

After checking the console I can see it's only calling App.addListener:

NOTE: This happens by default right after installing @capacitor/app, I have not added a listener anywhere

So I go back to my app, install @capacitor/app and don't you know it the hardware back button works out of the box.

So from this, I have a couple of problems:

• ionBackButton is not called at any point, which I assume means that the React docs for the hardware button are wrong or outdated (?)
• I cannot override backButton by calling my own App.addListener('backButton'). If I add mine, it will simply go back twice.

Is all of this intended? What is the correct way of doing this?

Expected behavior App.addListener('backButton') should not be called on its own, or if @capacitor/app is not installed ionBackButton should be fired.

Browser and OS (please complete the following information)

• OS: [e.g. iOS] Android
• Version: [e.g. 22] 30

[liamdebeasi]

Hey there,

I can add a note on the hardware back button docs here regarding @capacitor/app: https://ionicframework.com/docs/developing/hardware-back-button.

It's a bit hard to debug what is going on in your app without being able to reproduce the issue myself. Can you provide a GitHub repo I can use to verify this behavior?

[leo-petrucci]

I do not have the original code anymore since it's been a while but I can try recreating it whenever I get some time. Thank you for looking into this Liam!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!