[ReactNative] Androidのinactive状態を確認する方法〜AppState〜

ケースによってアンドロイドでもアプリの inactive 状態をチェックする必要がある。React NativeのApp StateではiOSのみinactive状態が確認できるのでアンドロイドのためには、下記のようにコードを追加して使用する。

// app/_layout.tsx

import {AppState} from 'react-native';
...
export default function RootLayout() {
  const appState = React.useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);
...
  useEffect(() => {
    const subscription = AppState.addEventListener('change', nextAppState => {
      appState.current = nextAppState;
      setAppStateVisible(appState.current);
    });
    return () => subscription.remove();
  }, []);

  useEffect(() => {
    if (Platform.OS === 'android') {
      const subscription = AppState.addEventListener('focus', () => {
        setAppStateVisible('active');
      });
      return () => subscription.remove();
    }
  }, []);

  useEffect(() => {
    if (Platform.OS === 'android') {
      const subscription = AppState.addEventListener('blur', () => {
        setAppStateVisible('inactive');
      });
      return () => subscription.remove();
    }
  }, []);
...

Android で AppState 値が active、inactive、background に変更される事を確認する。