installled @capacitor/app And handheld native back button.

Author: PriDebnath

frontend/package.json

@@ -32,12 +32,13 @@
     "build:github": "vite build --mode github",
     "lint": "eslint .",
     "preview": "vite preview",
-    "android:assets:generate":  "npx @capacitor/assets generate --android --assetPath public/logo --iconBackgroundColor \"#eeeeee\" --iconBackgroundColorDark \"#222222\"",
+    "android:assets:generate": "npx @capacitor/assets generate --android --assetPath public/logo --iconBackgroundColor \"#eeeeee\" --iconBackgroundColorDark \"#222222\"",
     "android:sync": "npx cap sync android",
     "android:open": "npx cap open android"
   },
   "dependencies": {
     "@capacitor/android": "^8.0.1",
+    "@capacitor/app": "^8.0.0",
     "@capacitor/assets": "^3.0.5",
     "@capacitor/cli": "^8.0.1",
     "@capacitor/core": "^8.0.1",

frontend/src/provider/native-back.provider.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+import { App } from '@capacitor/app'
+import { useRouter } from '@tanstack/react-router'
+
+export function NativeBackHandler() {
+  const router = useRouter()
+
+  useEffect(() => {
+    const sub = App.addListener('backButton', () => {
+      if (router.history.canGoBack()) {
+        router.history.back()
+      } else {
+        App.exitApp()
+      }
+    })
+
+    return () => {
+      sub.then(s => s.remove())
+    }
+  }, [router])
+
+  return null
+}

frontend/src/routes/__root.tsx

@@ -3,6 +3,7 @@ import { useApplyFont} from '@/hook/use-apply-font.hook'
 import { useApplyColorTheme} from '@/hook/use-color-theme.hook'
 import { Outlet, createRootRoute } from '@tanstack/react-router'
 import { useApplyTheme } from '@/hook/use-dark-or-light-theme.hook'
+import { NativeBackHandler } from '@/provider/native-back.provider'
 
 export const Route = createRootRoute({
   component: RootComponent,
@@ -14,6 +15,7 @@ function RootComponent() {
   useApplyFont()
   return (
     <React.Fragment>
+      <NativeBackHandler/>
       <Outlet />
     </React.Fragment>
   )