/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

6 votes145 views1 answer
React native docs
Javascript React
0 vote145 views1 answer
How to style navigation drawer react navigation v5
Javascript React
1 vote157 views1 answer
Class MyComponent extends React.Component { } ... what is the ES5 equivalent of this *
Javascript React
3 votes144 views3 answers
React hide source code
Javascript React
0 vote184 views1 answer
Background image not loading from a link react
Javascript React
0 vote164 views1 answer
React native generate app hash without play console
Javascript React
0 vote173 views1 answer
React-chartjs-2
Javascript React
0 vote195 views2 answers
Hosting react on gh pages
Javascript React
0 vote152 views2 answers
React hotjar
Javascript React
0 vote156 views1 answer
React Hook useEffect has a missing dependency: Either include it or remove the dependency array. If changes too often, find the parent component that defines it and wrap that definition in useCallback. (react-hooks/exhaustive-deps) eslint
Javascript React