Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
onMessage not called in native code even though sent from webview( android)
See original GitHub issueIs this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment: OS: macOS Sierra 10.12.6 Node: 8.2.0 npm: 3.10.0 Watchman: 4.7.0 Android Studio: 2.3.3 AI-162.4069837
Packages: (wanted => installed) react-native: 0.48.1 => 0.47.2 react: 16.0.0-alpha.12 => 16.0.0-alpha.12
Steps to Reproduce
In my application I display charts in web view and call window.postMessage on few event calls to update native side of code with chart values.
Following is my html code:-
const newHTML = `
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
<style media="screen" type="text/css">
#container {
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
user-select: none;
-webkit-user-select: none;
}
</style>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container">
<h1>hey you</h1>
</div>
<script>
$(function () {
Highcharts.chart('container', {
legend: {enabled: false},
xAxis: {visible: false},
yAxis: {visible: false},
title: {text: null},
credits: {enabled: false},
navigation: {buttonOptions: {enabled: false}},
plotOptions: {
series: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
radius: 7
}
}
},
point: {
events: {
mouseOver: function mouseOver() {
setTimeout(function () {
window.postMessage("message sent after a delay", "*");
}, 1000);
}
}
}
}
},
tooltip: {
enabled: false,
crosshairs: [false, false]},
chart: {
backgroundColor: "yellow",
events: {
load: function load() {
var points = [],
chart = this,
series = chart.series;
for (var i = 0; i < 1; i++) {
points.push(series[i].data[series[i].data.length / 2]);
}
points[0].setState("hover");
}
}
},
colors: ["red"],
series: [{
type: "line",
data: [{x: 1510531200000, y: 236.20835816}, {x: 1510617600000, y: 236.14731611}, {x: 1510704000000, y: 236.19027293}, {x: 1510790400000, y: 236.14771529}, {x: 1510876800000, y: 236.21421103}, {x: 1511136000000, y: 236.42030275}, {x: 1511222400000, y: 236.47527833}, {x: 1511308800000, y: 236.44742495}, {x: 1511395200000, y: 236.42727773}, {x: 1511481600000, y: 236.45929316}, {x: 1511740800000, y: 236.56954059}, {x: 1511827200000, y: 236.60561678}, {x: 1511913600000, y: 236.65886464}, {x: 1512000000000, y: 236.70694693}, {x: 1512086400000, y: 236.70694693}, {x: 1512345600000, y: 236.85976757}, {x: 1512432000000, y: 236.86976737}, {x: 1512518400000, y: 236.8984445}, {x: 1512604800000, y: 236.93705328}, {x: 1512691200000, y: 237.01074021}, {x: 1512950400000, y: 237.05711551}, {x: 1513036800000, y: 237.05334665}, {x: 1513123200000, y: 237.03563967}, {x: 1513209600000, y: 237.01289442}, {x: 1513296000000, y: 237.01289442}, {x: 1513555200000, y: 237.06624098}, {x: 1513641600000, y: 237.09679247}, {x: 1513728000000, y: 237.04226515}, {x: 1513814400000, y: 236.97796795}, {x: 1513900800000, y: 236.98008078}]}]});
});
</script>
</body>
</html>`;
Following is my Component containing webview:-
"use strict";
import React from "react";
import {connect} from "react-redux";
import PropTypes from "prop-types";
import ChartView from "react-native-highcharts";
/**
* Component to render Interactive chart to update the store with data from view
* **/
const InteractiveChart = ({chartConfig, dispatch}) => {
const onMessage = (event) => {
console.log("in hererer", event.nativeEvent.data);
};
return (
<WebView
source={{ html: myHtml, baseUrl: 'web/' }}
javaScriptEnabled={true}
domStorageEnabled={true}
scalesPageToFit={true}
scrollEnabled={false}
automaticallyAdjustContentInsets={true}
onMessage={this.onMessage}
/>
);
};
InteractiveChart.propTypes = propTypes;
export default InteractiveChart;
Now when i call postMessage, it shows that that message has been successfully sent from my web view mouse over event as it never enters the catch block but onMessage function in component is not called.
This is working perfectly fine in iOS and I am facing issues only in android.
Expected Behavior
onMessage function in native component should be called if postMessage is sent successfully on android just like it works in case of iOS
Actual Behavior
Tried on both iOS and android devices and onMessage function in native component is not being called if postMessage is sent successfully on android.
Reproducible Demo
Here is the link to snack code -https://snack.expo.io/Bycv3CnMz.
On move the marker on the chart the state value is updated in case of iOS from onMessage but in case of android onMessage is never called.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:5
- Comments:9
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Yeah in iOS you need to add a setTimeout because of the way the internal OS works. I read it this some issue created on react-native itself. Let me see if I can find it.
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.