Getting and Passing variables inside React Native from Webview

Question

i'm using [react-native-webview][1] in my project React Native. My webview has a javascript array, i need get this Array and show the values inside one menu, like this Slide Menu: https://raw.githubusercontent.com/instea/react-native-popup-menu/master/android.demo.gif

Code:

function WebViewPage(){
    const html = `
           <html>
           <body>
            <div id="reportContainer">here apear the content..</div>
            <script>
                  var reportContainer = document.getElementById('reportContainer');
                   var pages = [];
              reportContainer.getPages().then(function (reportPages) {
              //HERE RETURN A LIST FROM PAGES FROM MY REPORT..
              pages = reportPages;
              });
          </script>
          </body> 
           </html>
    `
   return(
    <Page>
     <WebView source={{html:html}} />
   </Page>
  );
}

export default WebViewPage;

Basically i need get the pages array and put on Menu at my Header. I was thinking work with hooks, but i don't know how to get this array, any ideas? Thank you. [1]: https://github.com/react-native-community/react-native-webview

What are you trying to do ? Why not just import your script ? — BloodyMonkey
– BloodyMonkey, Commented Jul 17, 2020 at 15:12
@BloodyMonkey At my webview show a Chart. This Chart has a many pages. I want to make a menu with a pages, when the user selected the Page on Menu, i have to send the page to webview again to open the specific chart at webview. — Márcio Fornari
– Márcio Fornari, Commented Jul 20, 2020 at 11:07

Chanuka Sandeepa · Accepted Answer · 2020-07-17 16:51:46Z

2

You can use onMessage callback function on webview component.

function WebViewPage(){
    const html = `
           <html>
           <body>
           <div id="reportContainer">here apear the content..</div>
           <script>
              var reportContainer = document.getElementById('reportContainer');
              var pages = [];
              reportContainer.getPages().then(function (reportPages) {
                 //HERE RETURN A LIST FROM PAGES FROM MY REPORT..
                 pages = reportPages;
                 window.postMessage(pages);
              });
           </script>
           </body> 
           </html>
    `
   const onMessage(data) { 
      console.log(data);
   }

   return(
    <Page>
     <WebView onMessage={onMessage} source={{html:html}} />
   </Page>
  );
}

export default WebViewPage;

answered Jul 17, 2020 at 16:51

Chanuka Sandeepa

7206 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Márcio Fornari Over a year ago

Hi, thank you!!, i search this method onMessage and the correct is: onMessage={(event) => onMessage(event.nativeEvent.data)}. and to pass is: window.ReactNativeWebView.postMessage("parameter from webview"); Now i do to get :). How it works if i want pass something to webview now?

Chanuka Sandeepa Over a year ago

Here's a great example with an exaplanation. undefinednull.com/2015/12/27/…

Chanuka Sandeepa Over a year ago

And this also great tutorial for webview. blog.logrocket.com/the-complete-guide-to-react-native-webview

Márcio Fornari Over a year ago

Thank you my Friend

Collectives™ on Stack Overflow

Getting and Passing variables inside React Native from Webview

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related