Ionic + React: Exit app after click Back Button on hardware

Question

I'm using Ionic with React to develop an app. I could't find any documentation about how to handle hardware back button click and how to exit from app. Is any docs or tutorials about that?

Answer 1

Import These Inside the App.tsx File

import React, { useEffect } from "react";
import { Plugins, Capacitor } from "@capacitor/core";

Create an effect for handling back button

useEffect(() => {
    if (Capacitor.isNative) {
      Plugins.App.addListener("backButton", (e) => {
        if (window.location.pathname === "/") {
          // Show A Confirm Box For User to exit app or not
          let ans = window.confirm("Are you sure");
          if (ans) {
            Plugins.App.exitApp();
          } 
        } else if (window.location.pathname === "/YourFirstPageRoute") {
           // Show A Confirm Box For User to exit app or not
          let ans = window.confirm("Are you sure");
          if (ans) {
            Plugins.App.exitApp();
          } 
        } 
      });
    }
  }, []);

Answer 2

To exit app after click back button on hardware, first you have to prevent default history back. https://ionicframework.com/docs/react/config

// App component
import { setupConfig } from '@ionic/react'

setupConfig({
  hardwareBackButton: false
})

then add Listener back-button

https://capacitor.ionicframework.com/docs/apis/app#method-addListener-3

import { Plugins, Capacitor } from '@capacitor/core'

  ...

  useEffect(() => {
    if (Capacitor.isNative) {
      Plugins.App.addListener('backButton', e => {
           // Use of location.pathname is also correct
        if (window.location.pathname === '/') {
          Plugins.App.exitApp()
        } else if (window.location.pathname === '/detail') {
          history.push('/')
        } else {
          history.back()
        }
      })
    }
  }, []) // eslint-disable-line
...

Answer 3

Well, you can make confirm alert before the exit on your main/home/dashboard page. I have added IonAlert with 2 buttons. Please have a look at my working code in actual device below:

import React, {useState } from 'react';
import { IonAlert } from '@ionic/react';
import { Plugins } from "@capacitor/core";

const HomePage: React.FC = () => {
  const { App } = Plugins;
  const [showBackAlert, setShowBackAlert] = useState(false);

 // listening to ionic back button event
 document.addEventListener('ionBackButton', (ev: any) => {
    ev.detail.register(-1, () => {
      // when you are in your home(last) page
      if (history.location.pathname === '/home') {
        // calling alert box
        setShowBackAlert(true);
      }
    });
  });

return (
    <IonPage>
       <IonAlert
          isOpen={showBackAlert}
          header={'Please Confirm!'}
          message={'Do you really want to exit our App?'}
          buttons={[
            {
              text: 'Nope',
              role: 'cancel',
              cssClass: 'secondary',
              handler: () => {}
            },
            {
              text: 'Yeah',
              handler: () => {
                App.exitApp();
              }
            }
          ]}
          onDidDismiss={() => setShowBackAlert(false)}
          cssClass='my-custom-class'
        />
 </IonPage >
  );
};

export default HomePage;