Is there a way to catch and cancel the back button event in a NativeScript app on the iOS platform?

Question

I'm working on a NativeScript-Angular app for both Android and iOS but have hit a problem with standard back button navigation. I have resolved the issue for Android, but cannot find a solution for iOS.

The event is causing a problem when going back to a particular page where routing data is expected, resulting in the exception:

"Error: Currently in page back navigation - component should be reattached instead of activated".

My Android solution catches the back button event and cancels it, then calls the router to do the navigation.


 ngOnInit() { 
     if (app.android) {
       app.android.on(app.AndroidApplication.activityBackPressedEvent, 
         (args: any) => this.backEvent(args));
     }
 }

 backEvent(args) {
   args.cancel = true; 
   this.backToRegister(false);
 }

 backToRegister(accepted: boolean){
   this.router.navigate(['/register', 
     this.registerParametersEntered.password, 
     this.registerParametersEntered.confirmPassword, 
     this.registerParametersEntered.code, 
     this.registerParametersEntered.email,
     accepted]);
 }

I want to do something similar with iOS, such as: -

if (app.ios) {
  this.page.on('navigatingFrom', (data) => {
    // TODO cancel the back button event
    this.backToRegister(false);
  })
}

I can't find a way of doing this for iOS - my research is leading me to the conclusion it is not possible to cancel the iOS back button - for example, see here.

Any ideas or alternative suggestions greatly appreciated!

This is not an Android question, the Android tag should be removed — Bruno Martins, Apr 09 '19 at 14:03
As noted in Brad Martin's answer, the back button could not be overridden. I ended up simply hiding it - for this page it was the simplest and most suitable solution. — Stephen Banbury, Apr 30 '19 at 08:42

score 2 · Accepted Answer · answered Apr 09 '19 at 14:30

You can't override the back button for iOS. See this SO question. You basically need to create a custom button, you can mimic the appearance of the back button on iOS and add your own event handler. That's how you'd do it in a native iOS app, and how you do it in NativeScript since the native controls are used via NativeScript.

The actionbar in nativescript can have a custom layout inside or you can just use an action-item and position it on the left for iOS, while also hiding the button on Android if you desire.

score 0 · Answer 2 · answered Feb 20 '23 at 07:42

0

Another solution would be, instead of catching the back button event just to throw it away/disable it - to just clear the history after you are switching a page where there no "back" to go to.

this.router.navigate(['level1'], {
   clearHistory: true
}

answered Feb 20 '23 at 07:42

Ricky Levi

7,298
1
57
65

Is there a way to catch and cancel the back button event in a NativeScript app on the iOS platform?

2 Answers2