/Javascript/React/How to give data from react native to webview

How to give data from react native to webview

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

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

Source: stackoverflow.com

How to give data from react native to 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' }}
/>

Source: stackoverflow.com

Similar codes

0 vote138 views1 answer
React style css image
Javascript React
0 vote130 views1 answer
React native filter list
Javascript React
0 vote125 views1 answer
Setting up react on visual studio code
Javascript React
0 vote130 views1 answer
React router dom props.history is undefined
Javascript React
15 votes120 views2 answers
React check if url address is valid
Javascript React
0 vote128 views1 answer
React router route not found redirect
Javascript React
0 vote126 views1 answer
React native image path in vriable
Javascript React
2 votes128 views2 answers
Splice state react
Javascript React
0 vote172 views1 answer
Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').
Javascript React
37 votes84 views5 answers
React sass
Javascript React