React-router history pushes / replaces not triggering webview events unless links are clicked twice

Bug description:

On Android, when navigating on our React web app, running inside a react-native-webview, no navigation events are triggered, unless you click the link twice. Adding the workarounds previously found in Guide.md (shimming the history methods) works, but I was under the impression this shouldn’t be necessary. The page I’m working with doesn’t use react-router directly but it uses the same underlying library (ReactTraining/history) and I can confirm the problem exists with react-router as well.

To Reproduce:

Load this codesandbox (it’s one of the react-router demo pages): https://bnpsd.csb.app/ in a react-native-webview Click around

Expected behavior:

Navigation events (like onNavigationStateChange) are called.

Environment:

• OS: Android
• OS version: 9 / 10
• react-native version: 0.61.4
• react-native-webview version: 8.0.3

[maximilize]

This problem is not solved. Can this issue be opened again?

[cbotsikas]

Although this is an old thread, maybe it’s helpful for others. It appears that onNavigationStateChange is not called on Android when the app uses history pushState and popState when navigating back in history. On iOS it is being called just fine. I noticed that onLoadProgress is called in both platforms so what I did was to use both like this:

      onNavigationStateChange={(navState) => {
        // On Android if the page uses history pushState and popState,
        // onNavigationStateChange is not called but onLoadProgress does
        setCanGoBackInWebView(navState.canGoBack);
      }}
      onLoadProgress={(syntheticEvent) => {
        const { nativeEvent } = syntheticEvent;
        // On Android if the page uses history pushState and popState,
        // onNavigationStateChange is not called but onLoadProgress does
        setCanGoBackInWebView(nativeEvent.canGoBack);
      }}