DEV Community 👩‍💻👨‍💻

Vaibhav Gehani for Enappd

Posted on • Originally published at enappd.com on

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

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

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

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

AppState

This API helps us to know the state of App if the 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 the current state of the application. We can only see the active state. But events can be triggered either in background, or foreground (because appState is indirectly using the Native Life cycle events).

Step 2 — Implementing security screen using AppState API

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

Security screen

In above video, you will see if the app comes in the foreground (while switching the app) then a blank screen would appear. And if the 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 the 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 the above code, you can render your main content in appStateVisible == ‘active’ and if you want to add any content to the security screen then add code in the else part.

Conclusion

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

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

Next Steps

If you liked this blog, you will also find the following React Native blogs interesting and helpful. Feel free to ask any questions in the comment section

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

React Native Full App by Enappd


Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠