[RN] AutoHeightWebview crash with navigation

react-native-webview가 있는 페이지에서 react-native-navigation으로 페이지가 이동할때 실제 디바이스에서 앱이 죽는 이슈가 있어서 해결방법을 찾아보았다.

우선 이 문제는 많은 RN 개발자들이 겪는 문제로 이미 해결방법이 크게 두가지로 나와 있었다.

webview에 style={{ opacity: 0.99 }} 를 넣어야 하거나, androidLayerType="software"를 속성으로 넣는 방법이다.

androidLayerType은  androidHardwareAccelerationDisabled가 Deprecated되고 대체되어 사용되어지는 속성이니 참고로 알아두자. 

 

처음에는 webView의 속성으로 androidLayerType="software" 을 넣어서 테스트를 해보았는데, 부작용으로 html의 이미지가 나오지 않았다.

그래서 androidLayerType을 제거하고 style={{ opacity: 0.99 }}을 추가 해 보았다. 그러나 일반 webview가 아닌 react-native-autoheight-webview 라이브러리를 사용한 문제인지 계속 crash가 생겼다.

일반 webview가 아닌 AutoHeightWebview를 사용해서 그런가보다 싶어 더 찾아보니 style={{opacity: 0.99, minHeight: 1}} 처럼 minHeight 속성을 추가 해야 했었다.

crash가 해결되었다.

완료 코드

import AutoHeightWebView from 'react-native-autoheight-webview';

<AutoHeightWebView
      style={{ opacity: 0.99, minHeight: 1 }}
      originWhitelist={['*']}
      source={{
        baseUrl: '',
        html: customStyle ? contents : postHtml({ contents }),
      }}
      scrollEnabled={scrollEnabled}
      onMessage={onMessage}
      injectedJavaScript={injectedJavaScript}
      automaticallyAdjustContentInsets={false}
      height={height}
    />