¿Cómo verificar el estado de la aplicación en React Native?

React Native es un marco de software de interfaz de usuario de código abierto creado por Meta Platforms, Inc. Se utiliza para desarrollar aplicaciones para Android, Android TV, iOS, macOS, tvOS, Web, Windows y UWP al permitir que los desarrolladores usen el marco React junto con con capacidades de plataforma nativa.

En este artículo, aprenderemos cómo podemos verificar el estado de la aplicación en React Native.

Creación de la aplicación React Native: 

Paso 1: usaremos expo para crear la aplicación nativa de reacción. Instale expo-cli usando el siguiente comando en la terminal.

npm install -g expo-cli

Paso 2: Cree un proyecto nativo de reacción usando expo.

expo init "gfg"

Paso 3: Ahora ve al proyecto creado usando el siguiente comando.

cd "gfg"

Estructura del proyecto: Tendrá el siguiente aspecto:

Comprobación del estado de la aplicación: el módulo AppState se puede utilizar para determinar el estado actual de una aplicación, ya sea en primer plano o en segundo plano. También puede notificarle cuando cambie el estado. Para esto, agregue el siguiente código dentro del archivo App.js.

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;

Ejecute la aplicación: Ahora ejecute la aplicación usando el siguiente comando en la terminal.

npm run web

Producción: