How to prevent redirecting when using react-native-webview on Android

Question

I want to prevent redirecting to new page in react-native-webview. Instead of redirection, I want to open new webview modal and open url at there.

Is it possible way to do this?

In IOS, using stopLoading works fine but it is not working on Android,

onNavigationStateChanged(navState) {
    if(navState.canGoBack)
    {
        this._webView.stopLoading();

        if(navState.url.indexOf('newWebViewPage') !== -1)
        {
            this.props.navigation.navigate('WebViewModal',{
                'url':navState.url,
                'title':navState.url
            })

            return false;
        }
        else
        {
            return true;
        }
    }
}

render() {
    let headers = {
        'Authorization':'Basic ' + btoa(NetworkUtils.USERNAME + ":" + NetworkUtils.PASSWORD),
        'Content-Type':'multipart/form-data',
    }

    return (
        <WebView
            source={{ uri: this.props.url, headers:headers }}
            bounces={false}
            javaScriptEnabled={true}
            onMessage={this.onMessage.bind(this)}
            injectedJavaScript={injectedJavascript}
            ref={(webView) => { this._webView = webView; }}
            style={[styles.webview,this.props.style]}
            startInLoadingState={false}
            useWebKit={true}
            onNavigationStateChange={this.onNavigationStateChanged.bind(this)}
            onLoadEnd={this.props.onLoadEnd?this.props.onLoadEnd:()=>{}}
            mixedContentMode={'compatibility'}
        />
    );
}

Please help!!

Answer 1

i am using react navigation. This way i do:

navigationRedirect = navState => {
    const { dispatch } = this.props.navigation
    const url = navState.url

      if(url.includes('www.unotv.com')){

         if(navState.canGoBack && navState.loading){

            this.webview.goBack()

             return dispatch(StackActions.push({
                 routeName: 'VisorWebView',
                 params: { url },
                 actions: [this.trackingForAnalytics(url)] //This function not affect the navigation
            }))

         }

     }else{
           this.webview.stopLoading()
           this.webview.goBack()
           Linking.openURL(url)
    }

}

  <WebView
     ref={ref => this.webview = ref }
     source={{ uri: this.state.baseURI }}
     originWhitelist={["https"]}
     userAgent="Mozilla/5.0 (Linux; Android 4.4.4; One Build/KTU84L.H4) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/33.0.0.0 Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/28.0.0.20.16;]"
                decelerationRate='normal'
                allowsInlineMediaPlayback={true}                    
                mediaPlaybackRequiresUserAction={false}
                sharedCookiesEnabled={true}
                mixedContentMode='always'
                startInLoadingState={true}
                containerStyle={{ marginTop: isTablet ? -60 : -50 }}
                renderLoading={() => (
                    <ActivityIndicator
                        color='#29aae1'
                        size='large'
                        style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'flex-start' }}
                    />
                )}
                onNavigationStateChange={this.redirect}
            />

When touch a link out of my domine opens the browser (Safari). If the link are on my domain, open another screen with other webview :)