Enable Popups in React Native WebView

Question

I have a react native application(using react-native 0.43.3) that uses webview to show a web page used for online banking. That site loads a popup window with the login page.

With the ReactNative WebView this popup window in not shown. In native android to enable popup window showing I found out that I need to make webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true), but couldn't found a way to set this parameter when using ReactNative WebView.

Is there a way which I can achieve this with the WebView provided with ReactNative?

@TommyLeong, As I remember we couldn't solve this directly and we came up with a different solution instead of showing a popup. Sorry! — Dinith Minura
Thanks for responding. Mind to share / recall what's the alternative? — TommyLeong

Samer Murad Samer Murad · Accepted Answer · 2018-02-15T20:08:25

A while back I needed to fork the react-native framework because there is a bug in the iOS WebView when using javaScript bridge between react-native and native (iOS and Android), after some research I came to the conclusion that I must fork the repo in order to fix it so I did. A week ago I needed the webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(boolean) method as well, so I went ahead and added it in my fork along with view.getSettings().setSupportZoom(boolean) and view.getSettings().setSupportMultipleWindows(supports).

If you want, here is my fork. Please keep in mind that it means that you need to build react-native for android from source, more info on the matter can be found here, it's a bit of a hustle to be honest, but in some cases it's worth it. the fork is from react-native 0.44.0, you should also keep in mind that if you use my fork, in means you probably wont be able to update version when they do come out, so it all depends on your needs in the end, worst case scenario you could always fork my fork and merge it with the newest version.

you can fetch my fork with npm by modifying you package.json file and then running npm update react-native

"dependencies": {
   //... 
   "react-native": "samermurad/react-native#rctWebView-legacy-fix",
   //...
 }

I am planning to extract the fixes and build a separate WebView component, but I am currently too busy for that :/

I hope that helps:)

Enable Popups in React Native WebView

1 Answers