DEV Community

loading...

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

Collapse
mukeshmandiwal profile image
Mukesh Mandiwal Author • 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>