onNavigationStateChange: Unable to prevent navigation on android, working on iOS

Bug description:

I’m trying to intercept a navigation change. On iOS, this works correctly where ref.current.stopLoading() prevents the WebView from navigating. On Android, it goes ahead and navigates (if at least partially) before stopLoading() takes effect.

To Reproduce:

I’ve made a fresh repo that exhibits this behaviour: https://github.com/alancwoo/react-native-webview-iss-1625

const App: () => React$Node = () => {
  const [url, setUrl] = useState('https://github.com/react-native-community/react-native-webview')
  const [key, setKey] = useState(0)

  const webViewRef = useRef(null)
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{ flex: 1, width: '100%' }}>
        <WebView
          key={key}
          ref={webViewRef}
          source={{ uri: url }}
          style={{ flex: 1, width: '100%' }}
          onNavigationStateChange={(event) => {
            if (event.url !== url) {
              webViewRef.current.stopLoading()
              Alert.alert('stopped')
            }
          }}
        />
      </SafeAreaView>
    </>
  );
};

Expected behavior:

Android should behave the same as on iOS, and should halt loading before transitioning.

Screenshots/Videos:

Android Start:

Tap on ‘Sign Up’ (Loads signup page before stopping and showing alert):

iOS (Correctly stops loading and shows alert):

Environment:

• OS: Mac OS
• OS version: 10.15.6
• react-native version: 0.63.2
• react-native-webview version: ^10.8.3

[DevAhmad7]

work with me

onLoadProgress={(e) => {
          const state = e.nativeEvent;
          setCanGoBack(state.canGoBack)
}}

[ausshadu]

@alancwoo

react-native-webview: ^11.2.1 react-native: 0.63.4

I tried using onShouldStartLoadWithRequest didn’t work 😕. No matter what, the page always redirects. The issue is only on Android. iOS works as expected.