React Native WebView에서 커스텀 userAgent 사용 시 뒤로 가기(goBack) 이슈 해결 (문제 해결)

개요

React-Native 웹뷰를 이용하여 앱을 구현한 상황이다. 모바일 웹에서 헤더 상단에 앱 홍보 UI를 넣기위해 웹뷰 앱에 커스텀된 userAgent를 전달하는 상황이었다.

문제 상황

안드로이드 웹뷰 앱은 안드로이드 기기의 물리적 뒤로가기 버튼에 대응할 수 있어야 한다. 따라서 웹뷰의 Ref의 canGoBack 상태를 이용하여, 페이지 히스토리에 따라 뒤로가기 기능을 구현하려고 하였으나 메인페이지 진입 후 첫 다른 페이지를 접속하면 true여야 할 canGoBack 상태가 false로 나오는 이슈가 발생하였다.

원인

이 문제는 웹뷰의 userAgent를 커스터마이징하면서 발생했다. 웹뷰에서 userAgent가 변경된 경우 초기 URL 로드와 히스토리 관리가 정상적으로 이루어지지 않았기 때문에 웹뷰의 canGoBack 상태가 제대로 업데이트되지 않는 결과로 이어졌다.

해결 과정

나는 사이트의 url을 useState를 이용하여 상태로 관리하였다.

const [initialLoadComplete, setInitialLoadComplete] = useState(false);
const [url, setUrl] = useState("about:blank");

초기값은 "about:blank"로 넣어주었으며, 이후에 useEffect와 웹뷰의 onLoadStart props를 이용하여, 웹뷰의 url을 바꾸어주었다.

  useEffect(() => {
    if (initialLoadComplete) {
      setUrl("https://www.hituru.com/");
    }
  }, [initialLoadComplete]);

...
        <WebView
          ref={webViewRef}
          style={{ flex: 1 }}
          textZoom={100}
          source={{ uri: url }}
          injectedJavaScript={INJECTEDJAVASCRIPT}
          onLoadStart={() => {
            handleLoad();
            setInitialLoadComplete(true);
          }}
          onLoadEnd={handleWebViewLoadEnd}
          onNavigationStateChange={(navState) => {
            handleNavigationStateChange(navState);
          }}
          showsVerticalScrollIndicator={false}
          userAgent={customUserAgent}
        />

이후에 발생하던 이슈가 해결되었다.