Skip to content
Related Articles

Related Articles

How to check App State in React Native ?

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Mar, 2022
View Discussion
Improve Article
Save Article

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;


Run the application: Now run the application using the below command in the terminal.

npm run web

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!