WebView stopLoading no longer working in onNavigationStateChange on Android

[tss101]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 6.11.2
Yarn: 0.15.1
npm: 3.10.10
Watchman: 4.9.0
Xcode: Xcode 8.2 Build version 8C38
Android Studio: 2.2 AI-145.3537739

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.3 => 0.53.3 (reproduced in react-native: 0.54.2, 0.55.4)

Steps to Reproduce

1. Create a Webview in 0.54.0, point it to a url with an embedded youtube video (iframe) or link
2. Call stopLoading in onNavigationStateChange

Expected Behavior

Newly clicked url stops loading

Actual Behavior

Url keeps loading

Reproducible Demo

export var TestWebContentView = createReactClass( {displayName: 'TestWebContentView',
    handleNavigationChange: function(navState) {
         console.log(navState)
         this.webview.stopLoading();
        }
    },
    render: function() {
        return (
            <View style={rootViewStyle} >
                <WebView
                ref={(ref) => { this.webview = ref; }}
                scrollEnabled={false}
                source={{uri: 'http://www.simplehtmlguide.com/livedemo.php?e=youtube2' }}
                startInLoadingState={false}
                mixedContentMode={'always'}
                scalesPageToFit={false}
                onNavigationStateChange={this.handleNavigationChange}
                allowsInlineMediaPlayback={true}
                automaticallyAdjustContentInsets={false}
                />
            </View>
        )
    }
})

I'm quite stumped by this, since it was working a week or so ago on the same Android device, on react-native 0.44. However, I reverted the react-native version back to 0.44 and it's still not working. Might a Chrome update be responsible? iOS version appears to work.

[aizigao]

same problem，how to fix it

[pmusaraj]

I had this issue on iOS, when trying to get an external link to stop loading in the webview and launch SafariView (via react-native-safari-view). I solved it (again, in iOS) by moving the relevant code to onShouldStartLoadWithRequest instead of onNavigationStateChange. My understanding is that onNavigationStateChange takes place too late in the lifecycle, so calling stopLoading does nothing.

[boxOfAces]

How to fix it for both iOS & Android?

[reyalpsirc]

Since onShouldStartLoadWithRequest does not exist on Android and stopLoading does not work now inside onNavigationStateChange, there's no way at the moment to catch a link of page and process something else inside the App without opening that link... :(

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[dancherb]

Still an issue in v0.53.0!

[riteshmahajan47]

Still same issue in Android in v0.53.3

[hramos]

Reopening as have seen various reports of this happening in 0.54

[hramos]

I've updated the original post with additional information from #18047

[hramos]

It looks like stopLoading was added by the community in commit 774296b. I'll mark this as the community's responsibility. Note that there's an issue open with discussion on what should be done about WebView here: #321

[gtjamesa]

Can confirm that this is still not working in 0.55.4

[rickyliu93]

still not work in 0.56 for some URL

[jamonholmgren]

Migrated to react-native-webview/react-native-webview#8 and this issue can be closed.