Vue NativeVue Native
Guide
Components
Composables
Navigation
  • iOS
  • Android
  • macOS
GitHub
Guide
Components
Composables
Navigation
  • iOS
  • Android
  • macOS
GitHub
  • Device & System

    • useNetwork
    • useAppState
    • useColorScheme
    • useDeviceInfo
    • useDimensions
    • usePlatform
  • Storage & Files

    • useAsyncStorage
    • useSecureStorage
    • useFileSystem
    • useDatabase
  • Sensors & Hardware

    • useGeolocation
    • useBiometry
    • useHaptics
    • useSensors
    • useBluetooth
  • Media

    • useCamera
    • useAudio
    • useCalendar
    • useContacts
  • Networking

    • useHttp
    • useWebSocket
  • Permissions

    • usePermissions
  • Navigation

    • useBackHandler
    • useSharedElementTransition
  • UI

    • useKeyboard
    • useClipboard
    • useShare
    • useLinking
    • useAnimation
    • useGesture
    • useNotifications
    • useI18n
    • usePerformance
  • Authentication

    • useAppleSignIn
    • useGoogleSignIn
  • Monetization & Updates

    • useIAP
    • useOTAUpdate
    • useBackgroundTask
  • Desktop (macOS)

    • useWindow
    • useMenu
    • useFileDialog
    • useDragDrop

useBackHandler

Intercept the hardware back button press on Android. On iOS this is a no-op (no hardware back button), but the event can still be dispatched programmatically.

Usage

<script setup>
import { ref } from '@thelacanians/vue-native-runtime'
import { useBackHandler } from '@thelacanians/vue-native-runtime'

const hasUnsavedChanges = ref(false)

useBackHandler(() => {
  if (hasUnsavedChanges.value) {
    // Show discard dialog, prevent default back navigation
    return true
  }
  // Allow default back navigation
  return false
})
</script>

API

useBackHandler(handler: () => boolean): void

Parameters

ParameterTypeDescription
handler() => booleanCalled on hardware back press. Return true to prevent default behavior, false to allow it.

Platform Support

PlatformSupport
AndroidHardware back button
iOSNo-op (no hardware back button)

Notes

  • The handler is automatically registered on onMounted and cleaned up on onUnmounted.
  • Only the most recently registered handler is active — if multiple components register handlers, only the one currently mounted and registered last will fire.
  • Useful for preventing accidental navigation when the user has unsaved changes, or for closing modals/drawers before navigating back.
Edit this page
Last Updated: 2/28/26, 11:24 PM
Contributors: Abdul Hamid, Claude Opus 4.6
Next
useSharedElementTransition