Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var { AppRegistry } = React;
var WebViewBridge = require('react-native-webview-bridge');
var ap = React.createClass({
componentDidMount() {
var ref = this.refs.webview;
ref.onMessage((message) => {
console.log('message from webview', message);
ref.send('response from native');
});
console.log('injecting');
ref.injectBridgeScript();
setTimeout(() => { ref.send('ho'); console.log('ho'); }, 2000);
},
render: function() {
return <WebViewBridge ref="webview" style={{flex:1}} html={`
<html>
<head><script>
function WebViewBridgeReady(cb) {
//checks whether WebViewBirdge exists in global scope.
if (window.WebViewBridge) {
cb(window.WebViewBridge);
return;
}
function handler() {
//remove the handler from listener since we don't need it anymore
document.removeEventListener('WebViewBridge', handler, false);
//pass the WebViewBridge object to the callback
cb(window.WebViewBridge);
}
//if WebViewBridge doesn't exist in global scope attach itself to document
//event system. Once the code is being injected by extension, the handler will
//be called.
document.addEventListener('WebViewBridge', handler, false);
}
document.addEventListener("DOMContentLoaded", function(ev) {
var h1 = document.getElementById('h1');
h1.innerHTML = 'ready1';
WebViewBridgeReady(function(bridge) {
h1.innerHTML = 'ready2';
bridge.onMessage = function(msg) {
h1.innerHTML = msg;
};
bridge.send('yo');
});
});
</script></head>
<body><h1 id='h1'>Hello</h1></body>
</html>`} />;
}
});
AppRegistry.registerComponent('ap', () => ap);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.