Fix iOS imports on RN0.40+ and replace UIWebview with WkWebview

[guilhermebruzzi]

No more deprecated webview on iOS and let people use webviewbridge API with RN 0.40+
I also included a new example SampleRN42 that shows that the main features still work.

[fungilation]

Wow, moving to WKWebview is a big jump. Which I wanted.

Are you using it in your own app and tested? Does it maintain same API as before, more or less?

[guilhermebruzzi]

@fungilation
Are you using it in your own app and tested? <- Yes
Does it maintain same API as before, more or less? <- Yes, only scalesPageToFit is not supported by wkwebview (all other props we used worked well)

[fungilation]

I commented inline in code:

Any reason why this isn't changed to #import <React/UIView+React.h>?

Same in ios/RCTWebViewBridge.m

[guilhermebruzzi]

@fungilation No reason, sent a fix, TY! :)

[fungilation]

Switched to your PR in my app, no bug so far that I can see. With noticeable improvement in WebViews' loading performance, much thanks for this!

[fungilation]

Tested and working in my app, with noticeable improvement in initial loading performance due to WKWebView.

[guilhermebruzzi]

@fungilation Nice! :D

[peterept]

The injectedJavaScript property no longer works.

Do you have a good idea how to add that back in for WkWebView ?

[fungilation]

I confirm that the WKWebView fork never worked. I mistakenly had the old version in my test app. On linking the new fork, app just crash to home screen on WebView's render.

I am using and need the injectedJavaScript prop.

[peterept]

@fungilation it mostly works for me with a few tweaks (which were ok for my situation):

• I moved my code from injectedJavaScript and embedded into my document
• WebViewBridge was not defined on initial document load, so I wait for it with a handler:

<script>
 (function () {
    function onWebViewBridgeReady() {
      document.removeEventListener('WebViewBridge', onWebViewBridgeReady, false);
      WebViewBridge.onMessage = function (message) {
          // assume message has a color 
          document.body.style.backgroundColor = message;
        }
     }
      WebViewBridge.send("webviewbridge-ready");
    }
   document.addEventListener('WebViewBridge', onWebViewBridgeReady, false)
  }())
</script>

My document works with that and I can send/receive data over the bridge.

[guilhermebruzzi]

@fungilation @peterept I fixed now this injectedJavaScript property and created a new example: examples/SampleRN42/ that you can use to test

[guilhermebruzzi]

@fungilation @peterept Anyway I never used injectedJavaScript in my projects.
I always embedded in the document like @peterept said, because is way faster and should be your solution if you have control over the document

[fungilation]

For me I need to inject JS, as I'm loading external websites. Thanks @guilhermebruzzi

[peterept]

Right. The code needs to use -[WKWebView evaluateJavaScript:completionHandler:] to do the inject, but I'm not sure where react-native-webview-bridge needs to do the injection exactly.

[guilhermebruzzi]

@peterept I called the method on the same places that UIWebview used to call his inject method.
Even If you call It earlier, the webview (on Android too) only allows the code to run after it has finished loading (If i'm not mistaken)

[peterept]

holy moley @guilhermebruzzi . I'm a fool... I cloned from your master branch on your fork (which has an older version of your code with WkWebView - missing the injection code). I'll switch to your branch feature/wkwebview and report back!

[peterept]

Confirmed it works! That's awesome work @guilhermebruzzi.

I installed from the correct branch (although I see you've updated master now also):

$ npm install --save git://github.com/vtex/react-native-webview-bridge.git#feature/wkwebview
$ react-native run-ios

And now the injectedJavaScript={injectScript} works and also the WebViewBridge variable is set already (as in the sample code) and so no need to wait for it:

const injectScript = `
(function () {
  if (WebViewBridge) {
    document.body.style.backgroundColor = "red";
  }
}());
`;

Thank you so much for this.

[guilhermebruzzi]

@peterept no problem! :) Yeah, you can install from master branch also.

[iOSHw]

@guilhermebruzzi how to use this pull request ? the master branch have problem!

[guilhermebruzzi]

@iOSHw What kind of problem?

To use the master branch you insert:

"react-native-webview-bridge": "vtex/react-native-webview-bridge",

on package.json dependencies

And than run npm install and react-native link

[UnsignedInt8]

@guilhermebruzzi Hi, bro. I really appreciate your hard working, but it seems not working under RN 0.44.2. Can you fix it?

[jenskuhrjorgensen]

Awesome!
I couldn't get this library to work ("Cannot read property 'NavigationType' of undefined") until I installed this PR - THANKS! :D

[jenskuhrjorgensen]

@guilhermebruzzi @alinz is anybody working on fixing the conflicts and merging this branch into master?

[alinz]

@jenskuhrjorgensen I'm extremely busy that's why I'm constantly looking for good maintainer? Are you interested?

[jenskuhrjorgensen]

@alinz That's a shame - your library has been very useful to me! :) I'm afraid I don't have the time either.