DEV Community

WebView — Navigation and data flow with WebViews in a React Native app

Mukesh Mandiwal on May 19, 2020

WebViews in React Native are the only way to let the user visit external links within an iOS or Android application. WebView can be used for embedd...
Read full post
Collapse
 
digitlninja profile image
digitalninja • • Edited

Hey man, great article. Ive tried to get data from RN to my WebApp but am not winning.
Where did you add the eventListener exactly?

Heres my gist
gist.github.com/digitlninja/fd4dea...

Collapse
 
mukeshmandiwal profile image
Mukesh Mandiwal • • Edited 

/* 
Sample data you want to pass from react  native to web 
*/

const runFirst = `
      document.body.style.backgroundColor = 'green';
      setTimeout(function() { window.alert(JSON.stringify([
             'Javascript',
             'React',
             'React Naitve',
             'graphql',
             'Typescript',
             'Webpack',
             'Node js',
          ])) }, 1000);
      true; // note: this is required, or you'll sometimes get silent failures
    `;

<WebView 
 source={{ uri: 'http://localhost:3000' }} // your webview  source
 ref={webviewRef}
 injectedJavaScript={runFirst}  // pass data to web from react native
/>

 /* In your webview now you can access using  */
<script>
  document.addEventListener("message", function(data) {
                       alert(data.data)
 });
</script>
Collapse
 
prajyotdukse profile image
prajyotdukse •

Hi @mukesh,

How do I pass dynamic values from react native to web view.
Static values I am able to pass but struggling to pass dynamic token

Regards,
Prajyot

Thread Thread
 
mukeshmandiwal profile image
Mukesh Mandiwal •

JSON.stringify your dynmaic token and add to injectedJavaScript = {json.stringfy(yourtoekn)}

Collapse
 
kris profile image
0xAirdropfarmer •

Thank you for this awesome tutorial. UI layouts can be improved but overall a great tutorial to get an in-depth concept of React Native Webview along with React Native Navigation. Anyone going through this article can grasp the concept of utilization of webviews in React Native app.

Collapse
 
redbar0n profile image
Magne •

What would you think about using this method to achieve a Hybrid-Native Sweet Spot: Native navigation with web content?

signalvnoise.com/posts/3743-hybrid...

It would allow you to make your webapp in whatever web framework you’d like, and swap it out whenever something better (like SolidJS) comes along. Clients would also get updates to the main webapp instantly. As opposed to users having to update their native app frequently, after the developer had to wait 14 days for App Store approval each time.

You could also completely avoid having an API client, merely serving HTML over the wire. See Hotwire.dev, where HOTwire Strada is similar to the JSON bridge you used to communicate between React Native and the WKWebView.

Doing that would allow you to SSR content even for the Native app. Giving more control to the server as to what is rendered, instead of using something like Server-Driven Rendering (like AirBnB etc.) which controls native components by using JSON commands from the server.

Not sure how good web animations would be, but allegedly they can run in 60fps inside the WKWebView.

This would also be superior to using CapacitorJS as a bridge between a webapp and native, since Capacitor requires you bundle and distribute everything (including updates) in the App Store.

Collapse
 
gautham495 profile image
Gautham Vijayan •

Gave exactly what i was looking for!!!

Collapse
 
mohamedshrif995 profile image
mohamedshrif995 •

thanks it's a great tutorial
can you add how to get location if URL included 'add address' or something like that

Collapse
 
mukeshmandiwal profile image
Mukesh Mandiwal •

You can use in this way


<WebView
  source={{uri: 'https://www.google.com/maps?daddr=28.69875679999999,77.29257710000002'}} />
Collapse
 
hoangdangcodecomplete profile image
hoangdangcodecomplete •

Hey man, i use source uri is a web build by react js. So can you tutorial me get data from react native app to react js web through ?

Thank you!

Collapse
 
lilkizarmie profile image
Jeffery Kizarmie Adolor •

been looking for this its very wonderful,

Collapse
 
venkateshparih4 profile image
venkateshparihar@gmail.com • • Edited

How can we use different event type name in add event listener instead of message.because it capturing other message events also.
document.addEventListener("message"