DEV Community

loading...

Controll Android Back Button in nativescript-vue

Meyti
Web Developer
Updated on ・1 min read

Just create a simple component:

import { android, AndroidApplication } from 'tns-core-modules/application'
import { isAndroid } from 'tns-core-modules/platform'

// WARNING: Just works on android
export default {
  props: {
    prevent: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      hooked: false
    }
  },
  watch: {
    prevent (newVal, oldVal) {
      if (newVal === oldVal) { return }
      if (newVal) {
        this.setHook()
      } else {
        this.clearHook()
      }
    }
  },
  render () {},
  mounted () {
    if (this.prevent) { this.setHook() }
  },
  beforeDestroy () {
    this.clearHook()
  },
  methods: {
    onBackEvent (data) {
      this.$emit('tap', data)
      if (this.prevent) {
        data.cancel = true // prevents default back button behavior
      }
    },
    setHook () {
      if (!isAndroid || this.hooked) { return }
      android.on(AndroidApplication.activityBackPressedEvent, this.onBackEvent)
      this.hooked = true
    },
    clearHook () {
      if (!isAndroid || !this.hooked) { return }
      android.off(AndroidApplication.activityBackPressedEvent, this.onBackEvent)
    }
  }
}

And use it like:

...
<android-back-button :prevent="true" @tap="onBackButton" />
...

Discussion (5)

Collapse
taliastorymaker profile image
Talia

Thanks so much for this. Resources for Nativescript-Vue are pretty sparse, so you're a real life saver.

Collapse
ralphtolipas profile image
Silexet Winter

Nice! Any idea how to implement this in iOS?

Collapse
meyt profile image
Meyti Author

Sorry, I've no idea about iOS.

Collapse
kevuno profile image
Kevin Bastian

It worked for me but it disables the back button in all vue pages! What can I do to fix this?

Collapse
meyt profile image
Meyti Author

Well, there was a bug in my code, and fixed now. i've forgotten to check prevent property. thank you.