[ReactNative] アプリがフォアグラウンド・バックグラウンドにいった場合をハンドリングするメモ

ユースケース

react-native-webviewを使用していて、アプリをバックグラウンドで起動した状態で放置していると、画面が真っ白になる現象が発生した。
コンポーネントなのか、webviewで表示しているオリジンの問題なのかわからなかったが、とりあえず解決するために、アプリがフォアグラウンドにきたことを検知してリロードを挟むことで対処した。
この方法他にも使えそうなので、メモとして残しておく。

公式↓

実装

Sample.tsx

import { AppState } from 'react-native';

export const Sample = () => {

 const appState = useRef(AppState.currentState);


 useEffect(() => {
    const subscription = AppState.addEventListener('change', 
 (nextAppState) => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === 'active'
      ) {
        // ここにフォアグラウンドにきた場合の処理
        webViewRef.current && webViewRef.current.reload();
      }
      appState.current = nextAppState;
    });
    return () => subscription.remove();
  }, []);


 return (
  <WebView
    {...props}
    ref={ref}
    source={{ uri: props.uri }}
  />
 );
};

AppState.addEventListener
AppState.addEventListener('change', ...) はアプリの状態（フォアグラウンド、バックグラウンド、非アクティブ）の変更を監視する。'change'イベントが発生すると、指定したコールバック関数が実行される。

コールバック関数
コールバック関数は、アプリの次の状態 (nextAppState) を受け取り、現在の状態 (appState.current) と比較する。
appState.currentが'inactive'または'background'であり、次の状態 (nextAppState) が'active'の場合に、WebViewをリロードする。
webViewRef.current && webViewRef.current.reload() は、 webViewRef が存在する場合にリロードメソッドを呼び出す。

クリーンアップ関数
return () => subscription.remove() によって、コンポーネントがアンマウントされるときにイベントリスナーを削除する。これにより、メモリリークを防ぐ。