How to know if a React Native App goes to background ?

We all question sometimes that — Is it possible to know if a React Native app has gone to background? Is there any callback or event which can be captured. The answer is AppState. As a bonus, we will cover adding security screen to react native application.

In this article, we will go through AppState API and implement a scenario having a security screen which will be shown while switching between apps and while app is in foreground.

AppState

This API helps us to know the state of App, if app is active, inactive or in background.

This API can be used in several use cases :

1. Handling Push Notification
2. Adding Security Screen.

In other words any event you want to perform while switching app between active to foreground OR foreground to background OR background to active. Any of the cases can be handled using AppState API.

In Background, AppState API is using native functionality to trigger these events, like for iOS it uses Life Cycle Events and those events can be Scene Based or App Based.

Step 1 — Implementing AppState API

To implement AppState, we just have to import it from React Native and add a change Event listener. That event listener, will provide the value of “what will be next /upcoming state for the application”. Using this we can trigger some code on State change.

appStateVisible holds the value of current state of application. We can only see active state. But events can be triggered either its in background, foreground (because appState is indirectly using the Native Life cycle events).

Step 2 — Implementing security screen using AppState API

Security screen is kind of blank screen that will appear while we are not active on application (In other words, when we are not using app there will be a blank/empty screen).

In above video, you will see if app comes in foreground (while switching the app) then a blank screen would appear. And if notification section is scrolled down, in that case also you will see a blank screen for a moment. It is the security screen to protect our data/view, while we are not on the app.

The logic of creating this security screen, is quite similar to above logic, we just have to add a condition to check the current state. If appState is in background or foreground state, then we have to show the blank screen and if app is active, render the main content in App.js

In above code, you can render your main content in appStateVisible == ‘active’ and if you want to add any content to security screen then add code in theelse part.

Conclusion

We know how we can handle situations where app is in background or foreground. There can be various scenarios “how to call API when app is in background”, “how to handle push notifications when app is in foreground or background” or “how to show security screen while app is in foreground”. Now we can handle these situations easily using AppState API.

Stay tuned to get more ways to use different inbuilt React native APIs.