CODEWITHSUNDEEP
nativescriptnativescript-vue
Steven
Steven

Reputation: 1414

Hardware button back code not responding correctly

<Page actionBarHidden="true" @loaded="pageLoaded" @unloaded="pageUnloaded">
        <DockLayout>
            <DockLayout v-show="search">
               ...
            </DockLayout>
            <DockLayout class="routeDetails" v-show="!search">
               ...
            </DockLayout>
         </DockLayout>
</Page>

           pageLoaded: function () {
                // We only want to register the event in Android
                if (application.android) {
                    console.log("halllo");
                    application.android.on(application.AndroidApplication.activityBackPressedEvent, this.backEvent);
                }
            },
            pageUnloaded: function () {
                // We only want to un-register the event on Android
                if (application.android) {
                    console.log("done");
                    application.android.off(application.AndroidApplication.activityBackPressedEvent, this.backEvent);
                }
            },
            backEvent: function (args) {
                console.log("hey I pressed");
                if (this.search) {
                    args.cancel = true;
                    this.search = false;
                } else {
                    args.cancel = false;
                }
            }

search is standard false.

Problem

Is when I'm on the show view where search = true. I want to press the Android hardware button back. It should be hidden and show the other one where search = false. But it only does that after I press the Android hardware button 2 times in a row.

But when I'm on the view where search = false, it logs the console.log after the first time I press the Android hardware button.

The code I found on this blog post. referenced in this Github issue

Update

Nativescript-Vue Playground

So what you need to do is click on one of the buttons on the screen. Then use the hardware button to go back. In this example, it will do it directly. But when you try to that a second time you will need to press the hardware button 2 times before it works. In my case, I always need to press 2 times before it works.

Upvotes: 0

Views: 62

Answers (2)

Culita Bogdan
Culita Bogdan

Reputation: 76

Do you have multiple active listeners on the activityBackPressedEvent?

You should use only the event name to remove the listener if alway there is only one active or you want to remove all of them.

application.android.off(application.AndroidApplication.activityBackPressedEvent);

Upvotes: 0

Manoj
Manoj

Reputation: 21908

You are missing the context, try

application.android.on(application.AndroidApplication.activityBackPressedEvent, this.backEvent, this);

Passing this as third parameter makes sure this within backEvent method points to Vue component.

Upvotes: 1

Related Questions