How to close webview after the work is done in react native

react native webview
react native webview communication
react-native webview injectjavascript
react native webview postmessage
react-native-webview incognito
react native webview onmessage
react-native webview back button
react-native-webview - npm

I am using following code to render a webview:

const someHTMLFile = require('./somefile.html')
render() {
  return (
     <View style={{flex: 1}}>
      <WebView
          style={{flex: 1}}
          source={someHTMLFile}
          ref={( webView ) => this.webView = webView}
      />      
    </View>
  );
}

In this html file, there is a form which is automatically submitted when the webview loads (with some data sent from reactnative part of code) and in the end, the file is redirected to a specific url, where some processing is done (on the send data), and right now, it returns nothing. So the screen goes blank.

So, at this point, I want to close the webview and take the user back to my reactnative app.. So, how can I do that? any suggestions?

Webview have onNavigationStateChange props which will give a foundation when webview loading starts or ends.

Therefore you can use these props to check current state or the current URL of webview and put some condition to close the webview.

render() {
    return (
        <View style={{flex: 1}}>
            <WebView
                style={{flex: 1}}
                onNavigationStateChange={(e) => {
                    console.warn("current state is ", JSON.stringify(e, null, 2));
                    /** put your comdition here based here and close webview.
                     Like if(e.url.indexOf("end_url") > -1)
                     Then close webview
                     */
                }}
                source={someHTMLFile}
                onLoadEnd={()=>{
                /* add you work that you want to do after loading is done. */
                }}
                ref={(webView) => this.webView = webView}
            />
        </View>
    );
}

How to close webview after the work is done in react native, React Native WebView renders web content in a native view, and it Now I'll show you useful examples of WebView, from simple to advanced, and some how -tos after that. stopLoading(); // maybe close this view? } I separated them by task and platform below, so you can choose exactly what you need. React Native WebView - a Modern, Cross-Platform WebView for React Native. React Native WebView is a modern, well-supported, and cross-platform WebView for React Native. It is intended to be a replacement for the built-in WebView (which will be removed from core). Core Maintainers - Sponsoring companies. This project is maintained for free by

Closing WebView is basically equals to un-mounting the component. You can do conditional rendering to mount and un-mount the component. The usual behavior is to open up a Modal which has a WebView inside. When you are done with the WebView you can send a message to react and then close the modal. This will un-mount the modal and WebView.

You can use onMessage prop to communicate between WebView and React-Native.

A function that is invoked when the webview calls window.postMessage. Setting this property will inject a postMessage global into your webview, but will still call pre-existing values of postMessage.

Example

_onMessage = (message) => {
   console.log(message);
}

render() {
  return (<WebView ref={(ref) => { this.webView = ref; }} onMessage={this._onMessage} ..otherProps />);
}

// In your webview inject this code

<script>
  window.postMessage("Sending data from WebView");
</script>

The complete guide to React Native WebView, onLoad. Function that is invoked when the WebView has finished loading. The default value is true . On iOS, when useWebKit=true , this prop will not work. In this tutorial i've covered how you can use webview to render web content inside your mobile app.

Just Make this props inside Webview Checkout Component :

<WebView    onMessage={event => event.nativeEvent.data === 'WINDOW_CLOSED' ? onClose() : onPaymentSuccess(event.nativeEvent.data)} />

WebView � React Native, WebView` renders web content in a native view. onLoad. Function that is invoked when the WebView has finished loading. The WebView component in React Native core first became available in React Native version 0.57.x. In this tutorial, you are going to learn how to utilize a primary WebView component using react-native-webview , which is the official cross-platform module to attain the functionality.

How to close a React Native WebView, In this React Native source code example, the source code below illustrate how to close a React Native WebView. You can copy and adopt this source code� That said, we will be moving that implementation into the react-native-webview component shortly after the native extensions ABI surface work is completed for ViewManagers. I am editing the title and adding to Extensions project for tracking.

How to handle navigation with WebViews in a React Native app, The WebView component in React Native core first became available in installed, you're going to config it to work on iOS and Android devices. This navigation between web pages is done when there's a way to store or� To reduce the surface area of React Native, <WebView/> is going to be removed from the React Native core. For more information, please read The Slimmening proposal . WebView renders web content in a native view.

How To Use WebViews in a React Native App, When developing in React Native, you may want to embed a web page with a WebView. You will find the complete code for this tutorial in this GitHub repository An iOS application does not require any further steps to make this work. Also, the stack navigator by default gives a way to exit the web view� Some quick examples are react-native-qrcode, react-native-webview-crypto, react-native-editor, etc If we move WebView out of core, these will no longer "just work" after an npm install. Simply declaring a dependency on the WebView-module won't work either, since it will require manual setup to work.

Comments
  • Hi, I am still facing an issue with this. The state is changed as soon as it redirect is started. I want to know when the redirect request is complete. So is there a way for that too?
  • Ok then you can use onLoadEnd or onLoad props of webview, which is as onLoad = {(event)=>{ Console.log(evebnt.nativeEvent) }} This can help you, as it runs after the complete page is loaded