How to know if app is in foreground or background in React Native?

React Native provides AppState module which gives information regarding the state of an application. We can know whether app is in foreground or background.

This module provides a property currentState which gives three values –

1. active – When app is in foreground.
2. background – When app is in background.
3. inactive – (on iOS only) When app is transitioning from foreground to background.

To listen the change in state, we can use addEventListener function. This helps in creating logic based on the current state of the app. Use it like this –

import { AppState } from "react-native";

useEffect(() => {
    const subscription = AppState.addEventListener("change", nextAppState => {
      ...
    });

    return () => {
      subscription.remove();
    };
  }, []);

In Android, we have 2 more events –

1. focus – Fires when app gains focus, i.e. user is interacting.
2. blur – When app loses focus. Like user pulled notification drawer. Here app is not inactive but blurred.

Code Example

import React, { useRef, useState, useEffect } from "react";
import { AppState, StyleSheet, Text, View } from "react-native";

const AppStateExample = () => {
  const [curState, setCurState] = useState(AppState.currentState)
  
  useEffect(() => {
    const subscription = AppState.addEventListener("change", nextAppState => {
      if (nextAppState === "active") {
        console.log("App is in foreground!");
      }

      setCurState(AppState.currentState);
    });

  
    return () => {
      subscription.remove();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text style={{fontSize: 20}}>Current state is: {curState}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default AppStateExample;

Output –

In the above image you can see that first phone is showing the list of running apps. So, our app is not in foreground. That’s why we are getting the current state as background. In second image our app is successfully showing active state.

In the code we added an event listener to get the changes in the app states. And later we removed it at line 18.

Live Demo

Conclusion

AppState is a React Module which is used to get the information regarding state of the application, whether it is in foreground or background. Both iOS and Android supports this.