[React Native] 안드로이드 웹뷰 애니메이션 버그 (Android WebView Crush)

회사에서 진행하는 리액트 네이티브 프로젝트에서 웹뷰를 사용해야 했다.

 

react-native-webview

https://www.npmjs.com/package/react-native-webview

 

웹뷰를 사용하고 테스트하던 중 안드로이드 플랫폼에서만 페이지 이동(react navigation 사용하였음), 스크롤 등의 애니메이션이 발생할 때 충돌이 발생하며 튕기는 버그가 발생하는 것을 확인했다.

 

구글링 하여 해결책을 찾아보았다.

 

1.  페이지 이동 시 발생하는 이슈 해결책

react navigation을 사용해 라우팅을 구현하였기 때문에 navigation 설정(options)에서 안드로이드 플랫폼만 라우팅 시 애니메이션이 발생하지 않도록 했다.

 

import {Platform} from 'react-native';

...
    <Stack.Screen
        name={~~~~}
        component={~~~~}
        options = {
            animationEnabled=Platform.OS !== 'android',
        }
    />
...

 

2. 스크롤 시 발생하는 이슈 해결책

WebView component의 스타일에 아래의 스타일을 추가한다.

 

{
	opacity: 0.99,
    minHeight: 1,
}

 

다른 방법도 있었지만 성능에 영향을 줄 수 있다고 하여 사용하지 않았다.

 

다른 방법

WebView 컴포넌트에 아래 prop을 추가한다.

androidHardwareAccelerationDisabled={true}