Skip to main content

Ionic Double Tap Back Button To Exit

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial we will implement double tap to exit funtionality for our Ionic app. The way that we will implement this is when the user taps the back button once then we will display a modal asking to press back again to exit.

Before we begin let me mention that back button is an Android only thing, iOS does not have a back button. The code that we write here will not execute in iOS so you need not worry about it.

In one of my previous post we saw How To Implement Back Button Confirm Before Exit. You can implenet either one of the methods as both of them prevent accidental exits.

Step 1)

First let’s create a new project and navigate into it. We will do that my running the following command.

Here we are using the blank template.

Step 2)

We will bind to the back button event in the app.component.ts file. So code up src/app/app.component.ts as follows.

Let’s understand what we are doing here piece by piece.

First of all we are importing the ToastController and injecting it into the constructor. Then we are declaring a public variable counter and giving it an initial value of 0.

After that inside the constructor we are registering the back buttion action with the following code.

Here, if counter is 0 that means that we are showing the toast for the first time.In that case we first increment the counter, then we show the toast and then start the timeout. If the user presses the back button again then we exit the app. If the user takes more than 3 seconds then the setTimeout will reset the counter to 0.

In the presentToast() function we are setting the duration for which the toast will be displayed to 3 seconds as well. It is a good idea to have the setTimeout and toast duration to be of the same value. Also, make sure that the duration is not too long or to short, 3 seconnds according to me is perfect.

Keep in mind that the priority number of the registerBackButtonAction in this case is set to 0. If you register another back button action with the same priority number then this function will get overridden. To know more about back button action read my previous post on How to Handle Hardware Back Button In Ionic.

 

Conclusion

As I have mentioned, double tap confirm before exit is a great way to prevent accidental exits. Personally, I prefer this method over the Confirm Before Exit. Let me know what you like in the comments below.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: