How can I send a data to webview by clicking on react native button

Question

I have used the componentDidMount method which sending data properly to webview but i want to send data webview when I click on particular react native button.

In this webview is displaying the local html page and in this I'm sending the data to webview and on load event in html page alert the data which sent by react native in this componentdidmount method is succesfully sending data to webview html page but when I'm trying same code in method which saying that this.input is undefined.

   export default class HtmlRender extends Component {

   //error:this.input is undefined
   sendData() {
         this.input.postMessage( data )
   }

// This Is working
 componentDidMount(){
         this.input.postMessage( data)
   }


 render(){
      return (
          <View style={styles.fullContainer}>
               <View style={styles.webviewBorder}  >

                  <WebView
                    ref={(input) => this.input = input}
                    source={{uri:'file:///android_asset/Page.html'}}
                   />
               </View>
           <View  >
                <Button  onPress={this.sendData}>
                   <Text>
                      Data
                   </Text>
               </Button>
            </View>
  </View  >

)}

score 8 · Accepted Answer · answered Aug 08 '20 at 07:18

In short

Sending Data from Native(Webview) to Web App

// Native
this.webviewRef.postMessage('Wayne is coming!!!')

// Web
window.addEventListener("message", message => {
  console.log(message.data) // Wayne is coming!!!
});

Sending data from Web App to Native(Webview)

// Web App
<button onClick={() => {
  if(window.ReactNativeWebView) { // ensure window.ReactNativeWebView is there, otherwise, web app might crash if is not there
    window.ReactNativeWebView.postMessage('Wayne is coming again')
  }
}}>
</button>

// Native App
<WebView
  onMessage={(event) => {
    console.log(event.nativeEvent.data) // Client received data
  }}
  source={{ uri: 'https://your.domain.com' }}
/>

Full Example React Native Code

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import { View, Button } from 'react-native';

class App extends Component {
  constructor(props) {
    super(props)
    this.webviewRef = null;
  }
  render() {
    return (
      <>
        <View style={{ flex: 1, alignContent: 'center', justifyContent: 'center' }}>
          <Button
            title="Press me"
            onPress={() => {
              this.webviewRef.postMessage('Wayne is coming!!!')
            }}
          />
        </View>
        <WebView
          onMessage={ (event) => {
            console.log(event.nativeEvent.data) // Client received data
          }}
          source={{ uri: 'https://your.domain.com' }}
          ref={ref => this.webviewRef = ref}
        />
      </>
    )
  }
}

Web App

// register an event listener
window.addEventListener("message", message => {
  console.log(message.data) // Wayne is coming!!!
  window.ReactNativeWebView.postMessage('Client received data')
});

score 6 · Answer 2 · answered Nov 29 '20 at 18:45

Unfortunately, for sending data from Native(Webview) to Web App with postMessage() method is deprecated in favour of injectJavaScript()

/**
 *  This script dispatches new custom messaging event
 */
function getInjectableJSMessage(message) {
  return `
    (function() {
      document.dispatchEvent(new MessageEvent('message', {
        data: ${JSON.stringify(message)}
      }));
    })();
  `;
}

// somewhere in your code
this.webviewRef.injectJavaScript(
    getInjectableJSMessage({
      message: 'Triggered event',
      triggeredAt: new Date(),
    })
);

In your webapp, register an event listener

function handleEvent(message) {
   console.log(message.data);
}

// This will only work for Android
// https://stackoverflow.com/a/58118984
document.addEventListener("message", handleEvent);

See related issue

This comment literally saved me days of searching through the web. Thank you — Proff Mushiana Mulweli, Mar 01 '22 at 09:52
Here's [the part of the docs referring to this](https://github.com/react-native-webview/react-native-webview/blob/dbb9a72304e14da714d02b7ca117ebdf900bb301/docs/Guide.md#communicating-between-js-and-native), for reference. — Prince Odame, Aug 30 '22 at 14:20

Lakshman Kambam · Answer 3 · 2019-04-19T18:34:43.480

3

you can do it with injectedJavaScript. just define your html page source in const

const htmlData = require('./page.html');

and create a method like below

injectedToHtml() {
    const myData = {planet: 'earth', galaxy: 'milkyway'};
    let injectedData = `document.getElementById('container').value = '${myData.planet+myData.galaxy}';`;
    return injectedData;
   }

and return your web view like this in your component

<WebView
    source={htmlData}
    javaScriptEnabled={true}
    injectedJavaScript={injectedToHtml()}
    style={{flex: 1}}
/>

that's it! let me know if you still have any question.

your html file look like this..

<!DOCTYPE html>
<html>
    <head>
      <style>
          #container {
              width:100%;
              height:100vh;
              display: flex;
              align-items:center;
              justify-content: center;
          }
      </style>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

edited Apr 19 '19 at 18:34

answered Apr 19 '19 at 15:55

Lakshman Kambam

1,498
13
20

1

Can this be possible on button click of react native .suppose if container data empty and i click on the react native button this will add the data in container – Milind Modi Apr 19 '19 at 16:01
yeah you can do that. @MilindModi – Lakshman Kambam Apr 19 '19 at 16:02
let me create expo snack for you. I will send you once I finish. – Lakshman Kambam Apr 19 '19 at 16:03
@MilindModi here it is.. https://snack.expo.io/@klakshman318/webview-injectjavascript – Lakshman Kambam Apr 19 '19 at 18:27
just a quick question what if i want to change the variable data after loading the webview . can we change the data after that? – Milind Modi Apr 19 '19 at 18:33
based on state you can change the data you want to inject into webview @MilindModi – Lakshman Kambam Apr 19 '19 at 18:40
can you give one example to change that data dynamically ? – Milind Modi Apr 19 '19 at 18:44
not only 1st loading but i need to change the values in the webview each time i click on button in react native . i.e. your webview is displaying the "earth milkyway " if i click on the button which is in react native resides in app not in html the text in the webview changes to "galaxy Something_else" – Milind Modi Apr 19 '19 at 18:54
@MilindModi ok. – Lakshman Kambam Apr 19 '19 at 19:00

score 1 · Answer 4 · answered Dec 17 '19 at 07:19

This is the simple code where you can send data to WebView on button click.

import React, { Component } from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import { WebView } from 'react-native-webview';

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  sendDataToWebView() {
    let injectedData = `document.getElementById("login_field").value = 'example@github.com';`;
    this.webView.injectJavaScript(injectedData);
  }

  render() {
    return (
      <View style={{ flex: 1, marginTop: 35 }}>

        <TouchableHighlight style={{ padding: 10, backgroundColor: 'gray', marginTop: 20 }} onPress={() => this.sendDataToWebView()}>
          <Text style={{ color: 'white' }}>Send Data To WebView from React Native</Text>
        </TouchableHighlight>

        <WebView
          style={{ flex: 1 }}
          source={{ uri: 'https://github.com/login' }}
          ref={(webView) => this.webView = webView}

        />
      </View>
    );
  }
}

score 0 · Answer 5 · answered Dec 13 '21 at 09:02

To send data from React Native to Webview

React Native Code

constructor (props) { 
 super(props);
 this.state = {  }  
 this.webView = React.createRef();
}

sendDataToWebView = (dataObject) => {
  
 this.webView.injectJavaScript(`( function() { 
   document.dispatchEvent( new MessageEvent('message', { 
   data: ${JSON.stringify(dataObject)}, 
   origin : 'react-native' 
  })); })();` );
   
}

render() {
 return(
  <WebView
   source={{ ... }}
   containerStyle={{ ... }}
   ref={(webView) => this.webView = webView}
  />)
}

WebView Code

if(window.ReactNativeWebView) {
  window.addEventListener("message", this.webViewEventHandler); //android 
  document.addEventListener("message", this.webViewEventHandler); //ios
} 

webViewEventHandler = (event) => {
 if (event.origin == 'react-native'){
  console.log(event.data) //get dataObject
 }  
}

How can I send a data to webview by clicking on react native button

5 Answers5