React Native - React Native 앱 백그라운드 실행 상태 감지

in REACT on React Native, Appstate, Background


React Native에서 앱이 백그라운드 상태(앱이 화면에 올라와있지 않지만 실행되고 있는 상태)에서 실행되고 있는 것을 감지할 수 있다.

먼저 AppState를 import 해준다.

import { AppState } from 'react-native';
그리고 state를 선언하는 부분에 appState를 추가해준다. 타입은 stringnull 로 선언해주면 된다.
interface State { appState: string | null }

this.state = { appState: AppState.currentState }

그리고 다음 코드를 추가해준다.

  async componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this.handleAppStateChange);
  }

  async handleAppStateChange(nextAppState) {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      console.log("Background to active");
    }
  };

이러면 앱이 백그라운드에서 실행되다가 다시 active(화면으로 올라왔을때)를 감지할 수 있다.