How to check App State in React Native ?

Last Updated : 30 Mar, 2022

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.

In this article, we will be learning how we can check the app state in react native.

Creating React Native App:

Step 1: We’ll be using expo to create the react native app. Install expo-cli using the below command in the terminal.

npm install -g expo-cli

Step 2: Create a react native project using expo.

expo init "gfg"

Step 3: Now go to the created project using the below command.

cd "gfg"

Project Structure: It will look like the following:

Checking App State: AppState module can be used to determine an app’s current state, whether it is in the foreground or background. It can also notify you when the state changes. For this, add the below code inside the App.js file.

Javascript

import React, { useRef, useState, useEffect } from "react"; 
import { AppState, StyleSheet, Text, View } from "react-native"; 
  
const GfGApp = () => { 
  const currentState = useRef(AppState.currentState); 
  const [state, setState] = useState(currentState.current); 
  
  useEffect(() => { 
    const handleChange = AppState.addEventListener("change", changedState => { 
  
      currentState.current = changedState; 
      setState(currentState.current); 
    }); 
  
    return () => { 
      handleChange.remove(); 
    }; 
  }, []); 
  
  return ( 
    <View style={styles.container}> 
      <Text>GeeksforGeeks React Native App State</Text> 
      <Text>App is in {state} mode</Text> 
    </View> 
  ); 
}; 
  
const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    justifyContent: "center", 
    alignItems: "center", 
  }, 
}); 
  
export default GfGApp;