[ React Native ] react native webview crash on android

react native webview 는 고질적인 문제가 있다.

 

이문제는 크롬의 업데이트에서부터 시작됐다.

 

webview 에서 크래시가 지 않는 방법은 대부분의 RN 개발자들이 검색 해봤을 것이다.

 

가장 저차원 적인 문제해결은 android manifest 에 

 

android:hardwareAccelerated="true"

 

값을 변경하는 것이다.

 

하지만 해당 hardwareAccelarted 를 전역에서 변경하면 react-native-video 같은 화면이 정상작동하지 않을 수 있다.

 

대부분의 개발자들이 workaround 의 한 방법으로 

 

Webview 스타일에

 

style={{

width: deviceWidth - 2 * horizontalPadding,

minHeight: 1,

opacity: 0.99,

}}

 

해당방법으로 opacity 를 넣는다.

 

해당 방법으로는 해결이 된다.

 

오늘 작성하는 글은

 

해당 방법으로도 해결되지 않는 버그가 생겼을때 해결하는 방법이다.

 

주로 webview 의 길이가 많이 길어지기에, scrollview 안에서 사용하는 경우가 많은데,

 

scrollview안에 있는 webview 의 길이가 매우 길어지면(react-native-webview 에는 5000px 정도로 나와있다)

 

스크롤이 업되거나 다운되면서 스크롤의 범위가 벗어날때, 크래시되는 경우가 발생한다.

 

scrollview의 bounce가 실행되며, 앱이 꺼지는 경우가 있는데

 

웹뷰를 포함한 scrollview 에서

 

 

bounces={false}

alwaysBounceHorizontal={false}

alwaysBounceVertical={false}

overScrollMode="never"

 

해당 props 로 bounce 액션을 막아주면 해결된다.