Moving the webview brigde to React-Native Core

[alinz]

Hello guys,

I have decided that, it is time to move this project into core. one of the problem with maintaining this project is not be able to extend the native class and as a result I have to copy and paste the entire source code of WebView implementation of react-native. This makes it very difficult. So what I'm asking is goto this link and vote that one. If I get the confirmation from core-team I will make a PR request to WebView and I will merge this project to core.

[stereodenis]

@alinz it is good idea! But could you check PRs?)

[goldenice]

This should be a core functionality for sure, but perhaps a more high level approach (e.g. executing arbitrary JS in the webview) would be more useful. I'm not sure how that would work on iOS, but I do know that would be easy to implement on Android. Writing your own bridging implementation (at least RN to webview) would be trivial if that kind of communication is possible

[alinz]

@goldenice RN's WebView has already implemented run arbitrary JS. what I want to add is the reverse one. WebVIew send a message back to RN. If you look into the implementation of WebView, you will see most of the important classes are inlined and because of that you can't extend it. That's what I want to do in core.

[stereodenis]

@alinz #90

[fungilation]

You have my vote. But approve pending PRs pretty please

[Naoto-Ida]

+1

[Hamiltontx]

+1

[bbay]

+1

[tslater]

Is there a PR for the react-native core?

[alinz]

working on it. should be send to them by couple of days.

[huangciyin]

+1

[alinz]

Since I'm still behind and react-native 30 is just around the corner, I will delay this and release the new version of app this weekend. Extremely busy with other stuff but I will find a time this weekend and make it available for you guys.

[CaoLiang1991]

+1

[starlight36]

+1

[stereodenis]

@alinz we're waiting))

[imlooke]

+1

[benlinton]

+1

[ackdav]

+1

[HectorFL]

+1

[dfejgelis]

RN 0.30 is here :)

[fungilation]

Is it including the bridge integrated?
On Thu, Jul 21, 2016 at 11:15 AM Diego Fejgelis notifications@github.com
wrote:

RN 0.30 is here :)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#109 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADoJSvvjF5Swi6t6IKt1bymr53AA2YQvks5qX7cvgaJpZM4I8_pF
.

[ackdav]

doesnt seem like it...? -> release notes

[jd327]

+1

[jzimmek]

+1

[cbcye]

+1 for this feature

[kinergy]

+1

[Roman-K93]

+1

[avishayil]

+1

[Fasani]

+1

[naltimari]

@tioback the rpc feature allows me to return a promise to the 'caller' and then resolve it from inside the react app (passing the result of the function call); it's almost like a sync function call, which is what I want

[sidevesh]

@tioback @naltimari Could you direct me to where I can get to know more about this rpc feature? Is this something built in react native now ?

[naltimari]

@sidevesh check the v2 branch of the project. The rpc allows you to offer an API to the webview so it can call methods from your app (that's what I'm working on). Unfortunately the v2 branch is still not compatible with RN40+, so I had to resort to use vext's fork of the master branch, and then implement an rpc-like feature in the injectScript

[sidevesh]

@naltimari okay thanks!!

[aqnaruto]

thankyou great work, does this support cache?

[vvavepacket]

so whats the status for this on react native 0.45 and above? was this integrated in core? i cant see on documentation that this supports android.

[yanhaijing]

+1

[jariwalabhavesh]

+1

[markeins]

Hi, so any news when this will be merged into core?

[hughlang]

+1

[neiker]

+1

[NaveenDK]

@alinz , just wondering if we could use this with expo react native? Thanks

[hbarylskyi]

The core WebView component has communication features now

[fungilation]

No it doesn't. Core has a f'ed up version with .postMessage that gets overrided by websites in the wild, rendering it useless.

[sunny635533]

+1

[bhargavb07]

+1

[alihesari]

+1

[jamonholmgren]

FYI, the core WebView is being extracted into a new community-supported version here:

https://github.com/react-native-community/react-native-webview

If you'd like to help us create a really solid, cross-platform WebView, this is a great time to do it. ❤️

[fungilation]

For sure. The whole RN community owes you @jamonholmgren a great deal in your spearheading effort there, consolidating contributions into a community developed WebView that doesn't suck for all platforms.

I'm not a native dev however so I can't help with the native side. What's the maturity of WKWebView in https://github.com/react-native-community/react-native-webview? Is it time yet to discuss a more robust postMessage, onMessage so ".postMessage (in WebView) wouldn't get overridden by websites in the wild"? This 2 way communication between RN and javascript within WebViews is what I need in my app, and I'll help with what I can in getting that done so I/we could migrate off react-native-webview-bridge.

https://github.com/CRAlpha/react-native-wkwebview seems to have a pretty robust API that's iOS for this RN<>WebView communication. But from what I remember when I tried using it, it had issues and just didn't work right in my app with message passing (I don't remember exactly how, it was a while ago). But if it works well now, it can be the basis of adoption for react-native-community/react-native-webview & expanding it for Android's side of WebView that would share the same RN<>WebView bridge api.

[jamonholmgren]

@fungilation Thanks for the kind words!! It's been my honor to work with so many amazing developers on this.

Is it time yet to discuss a more robust postMessage, onMessage so ".postMessage (in WebView) wouldn't get overridden by websites in the wild"?

I've heard this several times and I think it's something to consider for sure. I'd like to tackle it myself, in fact. I have some ideas, including one really interesting API I saw recently (I'll have to search for it again). Perhaps we could create an issue about it on the new repo.

[fungilation]

I started an issue at react-native-webview/react-native-webview#66 to discuss this further.

[kirill578]

I've written a wrapper the simplifies calling methods between react-native and the DOM.
check it out:
https://github.com/kirill578/react-native-webview-bridge-seamless

[alinz]

@kirill578 why your project is better than this? Are you supporting all features? if then can you send us PR to make it better?

[kirill578]

The requirement for a project I am working on is to be able to reuse existing code written in react native within the webview. For example, an API call from the webview requires a token, while there is a function in the react project called generateToken() that will take care of refreshing and authenticating the user.

I was considering to use this library in the beginning, but as the requirements to reuse the code grew, the switch statement inside onBridgeMessage grew as well. the issue became bigger as I had to handle promise rejections inside onBridgeMessage. if the generateToken failed for some reason I had to serialize the exception and resend it via sendToBridge

at the end of the day it looked to me that there is bunch of boiler plate code, so the idea behind react-native-webview-bridge-seamless is to facilitate inter process function call, between react-native and the webview.

adding new code that can be reused now, is a single liner. and the library handles all the serialization of successful or unsuccessful function invocation, which will also support rejecting an invocation with a timeout.

Last but not least, it's built as a wrapper for react-native-webview maintained by react-native-community which has support for more features like photo picker, photo taking from the webview, which I believe is something we will have to use at some point.

Ideally it could become a PR for react-native-webview, to avoid multiple projects that do the same thing.

[zuhairnaqi]

I found solution here is a link to stackoverflow
https://stackoverflow.com/a/58708882/11013049

[alinz]

Going to close this