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 :
- Handling Push Notification
- 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).
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
- Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
- How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Send & Read SMS | Google Vision | Pull to Refresh
- Payments — Apple Pay | Stripe payments
- Authentication — Google Login| Facebook login | Phone Auth | Twitter login
- Create Instagram / Whatsapp Story Feature in React Native
- React Native life cycle hooks | Implement Redux | Async actions with Redux
- Create Awesome Apps in React Native 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
Top comments (0)