21.01.12 TIL - RN AppState

리액트 네이티브에서 앱 상태 확인하는 방법

import { AppState } from 'react-native';

const appState = AppState.currentState;

이렇게 꺼내 쓸 수 있다.

• active - 앱이 foreground 에서 러닝중

• background - 앱이 background 에서 러닝중
  유저가 아래와 같은 상황일 수 있다:
  - 다른 앱 사용 중
  - 홈 화면에 있음
  - [Android] on another Activity (even if it was launched by your app)
  

• [iOS] inactive - foreground 와 background를 전환할 때 작동하거나. Multitasking view나 전화가 걸려오거나 하는 상황들... (자세한건 애플 공식문서 참고)

ios와 안드로이드의 앱 라이프 사이클이 다른점에 주의.

예시

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

const AppStateExample = () => {
  const appState = useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);

  useEffect(() => {
    AppState.addEventListener("change", _handleAppStateChange);

    return () => {
      AppState.removeEventListener("change", _handleAppStateChange);
    };
  }, []);

  const _handleAppStateChange = (nextAppState) => {
    if (
      appState.current.match(/inactive|background/) &&
      nextAppState === "active"
    ) {
      console.log("App has come to the foreground!");
    }

    appState.current = nextAppState;
    setAppStateVisible(appState.current);
    console.log("AppState", appState.current);
  };

  return (
    <View>
      <Text>Current state is: {appStateVisible}</Text>
    </View>
  );
};

export default AppStateExample;

react naitive appstate 공식문서 : https://reactnative.dev/docs/appstate?redirected
apple app life cycle 공식문서 : https://developer.apple.com/documentation/uikit/app_and_environment/managing_your_app_s_life_cycle