[React Native] WebView 강제 종료되는 버그

react-native-webview에서 앱이 강제 종료되는 버그가 있습니다.

<WebView 
    source={{
        html:changeHtmlTag(content) //html 내용 
    }}
    style={{
        height:webViewHeight,

    }}
/>

위와 같은 형식으로 WebView를 사용했는데, 페이지가 마운트 혹은 언마운트될 때 앱이 강제종료되는 버그가 있어 문제 해결에 참 애를 먹었습니다.

 

해결책으로는 두 가지 방법을 찾았습니다.

 

1. androidHardwareAccelerationDisabled

 

첫 번째는 androidHardwareAccelerationDisabled 속성을 true로 설정해주는 것입니다.

 

<WebView 
    source={{
        html:changeHtmlTag(content)
        // uri:'https://www.naver.com',
    }}
    style={{
        height:webViewHeight,

    }}
    androidHardwareAccelerationDisabled 
/>

하지만 이 방법은 넘겨주는 html이 길어지면 화면에 렌더링되지 않는 등 성능 상으로 좋지 않아 대안을 찾아보았습니다.

 

2. opacity:0.99, minHeight:1

 

두 번째 방법은 style 속성에 opacity:0.99, minHeight:1를 추가해주는 것입니다.

일종의 workaround인데요, 

<WebView 
    source={{
        html:changeHtmlTag(content)
        // uri:'https://www.naver.com',
    }}
    style={{
        height:webViewHeight,
		opacity:0.99,
        minHeight:1,
    }}
     
/>

동작 원리는 모르겠으나 정상적으로 작동하는 걸 확인할 수 있었습니다.

 

참고 

react-native-webview/react-native-webview#429 (comment)

[ANDROID] Crashes appeared around March 13th (Chrome 73) · Issue #429 · react-native-webview/react-native-webview