Why does my Nativescript-vue app crash when using the hardware back button before a modal is rendered?

Question

I have an app built in Nativescript-Vue where detail pages are shown in modals.

I use the method $showModal() to open a modal, but when I press the hardware back button on an Android device before the modal is rendered, the app crashes and it's giving me the following error.

If I wait a second, it works just fine.

TypeError: Cannot read property 'nativeView' of undefined

Should I override the back functionality to wait before the modal is fully rendered?

Answer 1

I think NativeScript-Vue might be trying to access a non-existent ref.

If you want to override it manually you could adding something like the following to your modal:

import * as app from 'tns-core-modules/application'

export default {
  data: {
    ...
    rendered: false
  },
  methods: {
    onBackButtonPress (message) {
      if (!this.rendered) return
      app.android.off(app.AndroidApplication.activityBackPressedEvent, this.onBackButtonPress)
      this.$modal.close(message)
    }
  },
  created () {
    app.android.on(app.AndroidApplication.activityBackPressedEvent, this.onBackButtonPress)
  },
  mounted () {
    this.rendered = true
  }
}

I'm not sure though whether the listener that's added in the created method will be added in time to prevent the crash.