Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
* Sample React Native App
'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');
setTimeout(() => { ref.send('ho'); console.log('ho'); }, 2000);
render: function() {
return <WebViewBridge ref="webview" style={{flex:1}} html={`
function WebViewBridgeReady(cb) {
//checks whether WebViewBirdge exists in global scope.
if (window.WebViewBridge) {
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
//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;
<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.