react-native-webview: infinite loading on Android when triggering a reload while having a custom userAgent set

Hi! found a rather strange bug on Android when using a custom userAgent and reloading via the ref.

Bug description:

When supplying a custom userAgent to the webview and triggering a reload via a webview ref it will result in the webview continuously loading.

To Reproduce:

I have created an MRE here however the code snippet would simply be:

function App(): JSX.Element {
  const webViewRef = useRef<WebView>(null);
  return (
    <SafeAreaView style={{flex: 1}}>
      <Button
        title="reload"
        onPress={() => {
          webViewRef.current?.reload();
        }}
      />
      <WebView
        ref={webViewRef}
        source={{uri: 'https://reactnative.dev/'}}
        userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1"
        style={{flex: 1}}
      />
    </SafeAreaView>
  );
}

Expected behavior:

The expected behaviour is that even with a custom userAgent provided to the WebView one would be able to reload the WebView with out it getting stuck in a loading loop.

Screenshots/Videos:

Environment:

  • OS: macOS
  • OS version: 13.2.1
  • react-native version: 0.71.6
  • react-native-webview version: 12.0.1

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Comments: 19 (1 by maintainers)

Most upvoted comments

I have this problem even without setting the userAgent, only for android on a physical device but it just never stops loading when I call reload.

I was able to work around this by using webViewRef.current.injectJavaScript('window.location.reload(true)'); 😭 I’ve added that and a user agent toggle to the reproduction: https://snack.expo.dev/@dereklucas/android-custom-useragent-infinite-reload-reproduction