MIGRATED: iOS WebView doesn't support hash url change. The onNavigationStateChange listener will not be called when url hash changes. (#20447)

[jamonholmgren]

Migrated from react/react-native#20447.

@ll929 says:

---

Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.3
CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 109.62 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 9.11.1 - ~/.nvm/versions/node/v9.11.1/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v9.11.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
Android SDK:
Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.1, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3
API Levels: 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 9.2/9C40b - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0

Description
Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.

Reproducible Demo
Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

Expected Behavior
When url hash change, the webivew onNavigationStateChange listener will be invoked, and the canGoBack properties is true

Actual Behavior
When url hash changes, the webivew onNavigationStateChange hasn't been invoked

[KoenLav]

Should it change?

It should definitely be consistent between Android and iOS, but should it change when the URL hash changes?

The URL hash typically refers to some portion of the document; clicking an anchor link will fast forward through the document to that portion.

But is the behavior really any different from scrolling? Scrolling also moves the viewport to a different portion of the document.

I think if you look at most Router implementations, currently, they will actually change the URL (not just the hash) when any significant change in the UI occurs.

Then again I could imagine multi-step forms which use the hash to indicate at which portion of the form a user resides; should we support that?

Does onNavigationStateChange trigger any other functionality? Such as calling injectedJavascript?

[Titozzz]

I think it would be useful to give more info to the users? I have use cases where I want to monitor when the url changes and I have to use postMessage inside react-router to notify react-native of the change (to update navigation title for example)

[xupengkun]

I think there are a lot of single-page applications (via hashes) that change, I think it's useful to be able to listen for hash changes.

[Titozzz]

@xupengkun my use case, exactly

[R10burning]

so have u fixed this hash url change state guys?

[Titozzz]

Not yet, feel free to send a PR

[liweijieok]

I has the same requirement too, I have a WebView which is a single-page application. And onNavigationStateChange only work in android, iOS has not reaction. So in the iOS device , the user browse the web page and click the left-top button, it will close the whole webview not that page.
if onNavigationStateChange work , i can be control the webview close or back to last page.
This is my problem, thanks.

[BANG88]

Its very important for web apps please add this feature 😭

Please.

[NestedLooper]

Here is a solution that seems to work for me on iOS:

Inject JS onto the page that sets the initial url and then continuously checks the current url against the initial one. If the user has navigated to a new page, the url will be different. When that happens you can send a postMessage back to your React Native code to handle the change and then set the current url to be checked again.

Example:

// initial url on page load
let initialUrl = window.location.href;

// check for changes in url
let checkUrlChange = () => {
 //get current url
 const currentUrl = window.location.href;
 //if it has changed send a postmessage to rn and set the new url as the initial to check against
 if(currentUrl !== initialUrl){
 window.ReactNativeWebView.postMessage('{ \"locationUpdated\": \"' + currentUrl + '\" }');
 initialUrl = currentUrl;
 }
}

//check for changes every 2 seconds
setInterval(checkUrlChange, 2000)

As an injectable template string, this would look like:

let injectedJs = `
let initialUrl = window.location.href;
let checkUrlChange = () => {
 const currentUrl = window.location.href;
 if(currentUrl !== initialUrl){
 window.ReactNativeWebView.postMessage('{ \"locationUpdated\": \"' + currentUrl + '\" }');
 initialUrl = currentUrl;
 }
}
setInterval(checkUrlChange, 2000);`

Now, in your onMessage function you can listen for this object being sent back and then handle it however you need to.

onWebMessage = e => {
 const data = e.nativeEvent.data;
 if (data && data.includes('locationUpdated')) {
 let newLoc = JSON.parse(data);
 let theUrl = newLoc.locationUpdated;
 //handle the new URL or change anything needed on URL change			
 }
}

Some notes:

• I am passing back a stringified JSON object because I listen for several different changes. You can just as easily pass back a string and not have to parse it.
• This method can be used to check for things other than just a URL change. For example, you could set the height of the page to a variable and check for a change in that - in case something was dynamically added due to interactions on the page, but didn't cause a URL change.