Install the app for notifications.
Shake to report a problem.
{active ? 'Live' : 'Paused'}
} ``` It starts as `true`, so the server render and the first client render agree. ## Handle the back button `useBackButton()` receives the Android hardware back button, and on desktop whatever the desktop driver reports (the window closing). The handler gets `{ canGoBack }`: ```tsx // app/components/order-sheet.tsx import { useBackButton, usePlatform } from '@kitr/platform/react' import { useCallback } from 'react' export function OrderSheet({ open, onClose }: { open: boolean; onClose: () => void }) { const platform = usePlatform() useBackButton( useCallback( ({ canGoBack }) => { if (open) onClose() else if (canGoBack) window.history.back() else void platform.exit() }, [open, onClose, platform], ), ) return open ? : null } ``` Wrap the handler in `useCallback`: the hook subscribes again whenever the function changes. On Android, Capacitor stops its default back behaviour while any listener is registered, so the handler must go back or exit itself. The browser driver has no back button, so the handler never runs on the web. ## Route deep links `useDeepLink()` receives URLs the OS hands the app while it runs: custom schemes (`acme://orders/1042`) and app links (`https://app.acme.com/orders/1042`). The handler gets the URL and its router path: ```tsx // app/components/deep-links.tsx import { useNavigate } from '@tanstack/react-router' import { useDeepLink } from '@kitr/platform/react' import { useCallback } from 'react' export function DeepLinks() { const navigate = useNavigate() // `path` is the URL with the scheme, host and deepLinkPrefixes removed. useDeepLink(useCallback((_url, path) => void navigate({ to: path }), [navigate])) return null } ``` Render `{platform.is('android') ? 'Android' : 'Other'}
{open ? :Sheet closed
}