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.

[seakingii]

+1

[quadsurf]

I see that React Native has the 'injectedJavaScript' property/attribute included in WebView:

Does this deliver the same capability/objective as @alinz 's webview bridge? If not, how do they differ? (I'm still a coding noob)

[adamipc]

@quadsurf The injectedJavaScript lets you run arbitrary javascript within the WebView but doesn't give you any mechanism for communicating between the WebView and your React Native code which is what the WebView Bridge adds.

[quadsurf]

thank you @adamipc ... since alinz added this to core via a recent PR, would updating to RN @latest get me all the functionality from this repo? Or would I still need to install this repo if I need that RN-to-WebView communication.

[stereodenis]

https://github.com/facebook/react-native/commit/abb8ea3aea686e2cd881a61fbc66d137857ef422

[tioback]

@stereodenis, care to explain what you aimed to achieve by simply posting a link?

[jacobp100]

It’s been added in 0.37.

[mlostekk]

wonderful! thanks to all for their great work!

[fungilation]

👍🏻 On Tue, Nov 8, 2016 at 6:45 AM Martin Mlostek notifications@github.com wrote:

wonderful! thanks to all for their great work!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/alinz/react-native-webview-bridge/issues/109#issuecomment-259154937, or mute the thread https://github.com/notifications/unsubscribe-auth/ADoJShpqk5Eu0GewMIlvA7QsXEa3QnVHks5q8IsQgaJpZM4I8_pF .

[Etheryte]

Please be considerate when replying to issues with many participants.
If you can, use the existing reaction functionality instead of adding a new comment, otherwise 40 people will get an email with just a thumbs-up emoji in their inbox.

[3449790992]

Javascript alert not working in android react-native webview，can you update it for support js alert?

http://stackoverflow.com/questions/41028001/javascript-alert-not-working-in-android-react-native-webview

[danielearwicker]

So do I need this package or is it already included in react-native? Above there are several messages indicating the project was added to core and then other messages saying it isn't yet.

[Etheryte]

@danielearwicker Did you try reading the docs?

[danielearwicker]

@Etheryte yes! I'm playing with WebView right now. I'm wondering if this project has anything extra.

[fungilation]

I'm still using this as RN's own is still stuck in the ivory tower: https://github.com/facebook/react-native/pull/10941#issuecomment-278807506

Unfortunately, as this package is getting orphaned with no merging of critical PRs.

[AlessandroAnnini]

Thanks for your work and kudos for the integration!

[naltimari]

it seems the 'v2' branch was NOT added to React Native's mainline code. The 'rpc' feature is very interesting and exactly what I need.

[tioback]

@naltimari, almost that. They didn't merge the v2 branch "as is", however the feature is there. You can still do the to and fro communication with the WebView.

[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 https://github.com/react-native-community/react-native-webview/issues/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