Android Back Button handling in React Native apps — 1x08

This story is part of a series where I am sharing my experiences on React Native: how I approached and worked with RN Components, APIs, external packages and all sorts of issues. I hope that this series of posts will prove useful to the React Native community and provide helpful insights.

The Android Back Button

Image 1: sample hardware Android Back Button

The Android Back Button (ABB from now on) is a cool functionality of Android phones and Android users are very used to it. iPhone does not have something like it, but if you are developing a React Native app for Android, you need to make sure you add the functionality and make it work “as expected”.

ABB’s expected behavior conveys over the following behaviors:
1. navigate to the previous view

Image 2: Clicking the Android Back Button in Shop view to return back to Home

2. if there is no previous view to navigate to (i.e user in Home view), it should prompt the user with a dialog box asking if he wants to exit the app. That way users understand they can’t go further back.

Image 3: Clicking Android Back Button in Home view

Let’s develop the functionality

React native provides BackHandler API (there’s also BackAndroid but it’s deprecated) for detecting hardware back button presses. In order to handle the 2 aforementioned cases, we are going to create 1 method for each as shown below:

Method handleAndroidBackButton adds an event listener to detect the press of ABB and accepts a callback function as an argument, in order for us to supply the desired functionality, in our case the navigation to the previous view. Pay attention the fact that we use return true inside the addEventListener function in order to prevent the default functionality of exiting the app. So we should add this when we do not want for the API to automatically close the app.

Method removeAndroidBackButtonHandler removes the previously added event listener in order to secure that we will not keep adding event listeners when we navigate back (most routing libraries will re-mount the view, causing a new listener to be added and if that happens, the application might glitch or even crash).

Let’s see an example of how to use these methods now, inside a view of our application. Simply invoke the handleAndroidBackButton method inside the constructor or componentDidMount and pass the callback function that will navigate the user to the previous view (navigateBack). Also invoke the removeAndroidBackButtonHandler method inside the componentWillUnmount lifecycle method.

Method exitAlert makes use of the Alert RN API that can display alert modals to the UI. We add the modal title: Confirm Exit , the modal’s main text: Do you want to quit the app? along with the 2 buttons that will appear to the user with their respective functionality. From left to right we will see over the UI a button with the text Cancel and a button with the text OK. Cancel button simply dismisses the modal (functionality is built in), while OK works with a callback function where we pass the exitApp method of Backhandler API.

This method (exitAlert) can be passed as a callback to the previous method (handleAndroidBackButton) inside the views that “there is no going back”. I.e. in Home view we will have the following code:

For more details check the RN docs for backHandler and Alert APIs.

What do you think?

What do you think about this article? How did you structure Android Back Button within your App? Offer your perspective and ideas in the comments section below.

If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.

About me

Hi there, I’m Tasos; a software engineer that loves web and currently works a lot with React Native and React. I’m the co-founder of Coded Lines software agency where we undertake end-to-end mobile & web projects with emphasis to in-app marketing. If it sounds what you are looking for, please contact me here: Thanks for stopping by :)

Building With React Native

Technical posts about React Native. What issues we encountered while developing Math Warriors Android game and how we solved them.

Tasos Maroudas

Written by

Front End / Mobile Engineer currently working with React Native, React & TypeScript 😃 Part time blogger. Co-Founder of Coded Lines Ltd

Building With React Native

Technical posts about React Native. What issues we encountered while developing Math Warriors Android game and how we solved them.