/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

2 votes383 views2 answers
Await in react in function component
Javascript React
4 votes413 views1 answer
React how to remove commas from a string
Javascript React
0 vote357 views1 answer
React router native back button
Javascript React
0 vote404 views1 answer
React datetime mannual editing
Javascript React
3 votes386 views3 answers
How to manage safearea in both iphone and android in react native
Javascript React
55 votes346 views6 answers
Useref in react
Javascript React
0 vote415 views1 answer
How to add icon in react
Javascript React
11 votes398 views2 answers
'React' must be in scope when using JSX react/react-in-jsx-scope
Javascript React
0 vote371 views2 answers
Read data in props.histroy.push in react component
Javascript React
13 votes393 views4 answers
Passing data in react router history,push
Javascript React