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 >
)}
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')
});