[알게된 것] React Native WebView 화면 회전 시 Layout이 깨지는 문제

문제상황

앱을 가로로 눕혔더니 화면이 잘림

해결방안

import {Dimensions, ...} from 'react-native';
// react native safearea의 문제점을 보완한 라이브러리 (여백 계산)
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
// WebView Size를 control 할 상태
const [webViewSize, setWebViewSize] = useState({
    width: Dimensions.get('window').width - insets.left - insets.right,
    height: Dimensions.get('window').height - insets.top - insets.bottom,
  });

// 화면 회전 시마다 작동할 hook
useScreenRotate(setWebViewSize);

...
return (
    <SafeAreaView style={styles.container}>
      <WebView
        ...
        style={{
          width: webViewSize.width,
          height: webViewSize.height,
        }}
      />
    </SafeAreaView>
  );

// useScreenRotate.ts
import {useEffect} from 'react';
import {Dimensions, LayoutAnimation, Platform} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';

const useScreenRotate = (
  setWebViewSize: ({width, height}: {width: number; height: number}) => void,
) => {
  const insets = useSafeAreaInsets();

  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({window}) => {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
      if (Platform.OS === 'ios' && window.width > window.height) {
        // iOS 기기에서 가로 화면일 경우 상태바와 홈 바 높이만큼 웹뷰 크기 줄이기
        setWebViewSize({
          width:
            Dimensions.get('window').width -
            insets.top -
            insets.bottom -
            insets.left -
            insets.right -
            20,
          height: Dimensions.get('window').height - insets.left - insets.right,
        });
      } else {
        setWebViewSize({
          width: Dimensions.get('window').width,
          height: Dimensions.get('window').height,
        });
      }
    });

    return () => subscription?.remove();
  }, [insets, setWebViewSize]);
};

export default useScreenRotate;

iOS의 경우 특히나 화면 잘림이 심해서 여백을 계산한 값을 주지 않으면 화면이 잘리게 됨