How to know if a React Native App goes to background ?
Tags: react, iosappdevelopment, androidappdevelopmen, reactnative
Published: 2022-09-08 06:55:33

---
title: How to know if a React Native App goes to background ?
published: true
date: 2022-09-07 20:34:45 UTC
tags: react,iosappdevelopment,androidappdevelopmen,reactnative
canonical_url: https://enappd.com/blog/how-to-know-if-a-react-native-app-goes-to-background/204/
---

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

![](https://cdn-images-1.medium.com/max/1024/1*PZChlOrQ5XMiTzBIZUeozQ.png)

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](https://developer.apple.com/documentation/uikit/app_and_environment/managing_your_app_s_life_cycle) 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.

{% gist https://gist.github.com/vaibhavgehani/c09db5d14e01633e7bb822ce846a7383 %}

**_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](https://cdn-images-1.medium.com/max/380/1*7iSmVSFURqitVpePkwIPvw.gif)

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**

{% gist https://gist.github.com/vaibhavgehani/8009ad1e49363605908596b2af4f2728 %}

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

- Firebase — [**Integrate Firebase**](https://enappd.com/blog/intergrate-firebase-in-react-native-app/73) | [**Analytics**](https://enappd.com/blog/firebase-analytics-in-react-native-app/101) | [**Push notifications**](https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86) | [**Firebase CRUD**](https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86)
- How To in React Native — [**Geolocation**](https://enappd.com/blog/geolocation-geocoding-react-native-apps/84) | [**Life cycle hooks**](https://enappd.com/blog/react-native-life-cycle-hooks/79) | [**Image Picker**](https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78) | [**Redux implementation**](https://enappd.com/blog/redux-in-react-native-app/92) | [**Make API calls**](https://enappd.com/blog/how-to-make-api-calls-in-react-native-apps/125) | [**Navigation**](https://enappd.com/blog/navigations-in-react-native-app/124) | [**Translation**](https://enappd.com/blog/how-to-translate-in-react-native-app-globalization-internationalization-and-text-to-speech/120) | [**Barcode & QR code scan**](https://enappd.com/blog/react-native-qr-code-scanning-using-react-native-camera/117) | [**Send & Read SMS**](https://enappd.com/blog/send-read-and-delete-sms-in-react-native/107) | [**Google Vision**](https://enappd.com/blog/google-vision-with-react-native/96) | [**Pull to Refresh**](https://enappd.com/blog/refreshcontrol-pull-to-refresh-in-react-native-apps/130)
- Payments — [**Apple Pay**](https://enappd.com/blog/implement-apple-pay-in-react-native-apps/93) | [**Stripe payments**](https://enappd.com/blog/stripe-integration-in-react-native-apps-using-firebase/108)
- Authentication — [**Google Login**](https://enappd.com/blog/google-login-in-react-native-android-apps-with-firebase/90)| [**Facebook login**](https://enappd.com/blog/facebook-login-in-react-native-apps/89) | [**Phone Auth**](https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86) | [**Twitter login**](https://enappd.com/blog/twitter-login-in-react-native-apps-using-firebase/95)
- [**Create Instagram / Whatsapp Story Feature in React Native**](https://enappd.com/blog/how-to-make-stories-ui-like-instagram-and-whatsapp-in-react-native/123)
- [**React Native life cycle hooks**](https://enappd.com/blog/react-native-life-cycle-hooks/79) | [**Implement Redux**](https://enappd.com/blog/redux-in-react-native-app/92) | [**Async actions with Redux**](https://enappd.com/blog/async-actions-with-redux-thunk-middleware-in-react-native-apps-1/100)
- [**Create Awesome Apps in React Native**](https://enappd.com/blog/guide-on-react-native-full-app/53) using Full App

If you need a base to start your next React Native app, you can make your next awesome app using [**React Native Full App**](https://store.enappd.com/product/react-native-full-app/)

![React Native Full App by Enappd](https://cdn-images-1.medium.com/max/800/0*50h94UU2H2pkisje.jpeg)

* * *