[React-Native] Webview Process Terminated 에러 해결 방법

웹뷰에서 메세지를 받아 네이티브 스크린으로 이동하여 카메라 촬영하는 도중에 다음과 같은 이슈를 확인 했습니다.

이 이슈는 react-native-webview 모듈에서 발생하는 문제로, 기기가 일정 부분 이상 메모리 리소스를 사용 할 경우, 웹뷰가 강제 종료(terminated) 되는 현상으로 파악 했습니다.

해결방안

ios 웹뷰가 너무 많은 리소스를 사용 할 경우 등의 이유로 앱이 멈추는(crashing/freezing) 문제라고 하며, WebView 컴포넌트의 onContentProcessDidTerminate 프로퍼티로 terminated 된 이후 액션을 정의 할 수 있습니다.

	<WebView
          ref={webviewRef}
          source={{ uri: webviewURL }}
          originWhitelist={["*"]}
          javaScriptEnabled={true}
          onMessage={onMessage}
          webviewDebuggingEnabled={true}
          onContentProcessDidTerminate={() => {
            webviewRef.current?.reload(); --> 코드 추가
  	}}
  />

위와 같이 코드를 추가 한 뒤, 앱을 다시 빌드하여 실행해보니 성공적으로 앱이 리로딩되어 웹뷰화면이 정상적으로 보이는것을 확인 하였습니다.