React Native Navigation: Sending app to background

“Colorful cars wind around a bend in the road through the mountains” by Brandon Usmany on Unsplash

If you have used react-native for any significantly sized project, you will have realized by now that it is super easy to get something up and running, perhaps even (kind of) ready for beta release, and you will also by now know that navigation can be a <BadWord language=“en” /> , enter react-native-navigation.

After trying a bunch of navigators, I can safely say react-native-navigation was a huge game changer for my team — amazing performance, active community, backed by Wix, and super easy to use! There is still some notification stuff we, the community, need to figure out but other than that, its amazing!

This is a short post on how to send a react-native android app to the background when the user presses “back”, instead of killing the app.

React & React Native are the tools we need to win the war.

— Winston Churchill

Why not just kill the app?

When an android user presses “back” to leave the app, the activity is killed and can result in a whole host of negative effects on the user experience and your app as well.

The biggest pain point of this default function is that the app has to launch every time the user comes back to it, react-native is notorious for extremely poor start-up times. This also means that you have likely lost any state you had causing the user to “start afresh”.

Another pain point is that your app cannot keep running in the background, and you can’t run background tasks like geolocation and the like.

How I Solved It

The solution is quite simple actually, its a one line type of fix.

For navigation, I always use react-native-navigation for its superb native like performance and its easy to use JavaScript API. Follow the instructions on the website to install the package.

Now for the main event, navigate to your projects node modules folder and locate the react-native-navigation folder and inside it, follow the path to the NavigationActivity.java: /android/app/src/main/java/com/reactnativenavigation/controllers/NavigationActivity.java

In the NavigationActivity.java file, you will see the following method at around line 196:

@Override
public void invokeDefaultOnBackPressed() {
    if (layout != null && !layout.onBackPressed()) {
        super.onBackPressed();
    }
}

The above function basically just tells the device that if the app has been laid out and the layout has no backPressed() method implemented, then just do the default action of killing the app.

What we need to do is to comment out the line: super.onBackPressed() and add the line: this.moveTaskToBack(true); and thats all!

Resulting in the following:

@Override
public void invokeDefaultOnBackPressed() {
    if (layout != null && !layout.onBackPressed()) {
        // super.onBackPressed();
        this.moveTaskToBack(true);
    }
}

That’s the simple change that I made to tackle my problem. If anyone has a better way to solve the problem please let me know in the comments and I will list it out here!