mirror of
https://github.com/status-im/react-native-webview-bridge.git
synced 2026-09-01 05:41:06 +00:00
wip for android
This commit is contained in:
Ali Najafizadeh
+250
-104
@@ -2,132 +2,243 @@
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* Copyright (c) 2016-present, Ali Najafizadeh
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule WebViewBridge
|
||||
* @providesModule WebView
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var ReactNative = require('react-native');
|
||||
var invariant = require('invariant');
|
||||
var keyMirror = require('keymirror');
|
||||
var resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
|
||||
|
||||
var {
|
||||
ReactNativeViewAttributes,
|
||||
UIManager,
|
||||
import React, { PropTypes } from 'react'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
EdgeInsetsPropType,
|
||||
StyleSheet,
|
||||
Text,
|
||||
UIManager,
|
||||
View,
|
||||
WebView,
|
||||
ScrollView,
|
||||
NativeModules,
|
||||
requireNativeComponent,
|
||||
DeviceEventEmitter,
|
||||
NativeModules: {
|
||||
WebViewBridgeManager
|
||||
}
|
||||
} = ReactNative;
|
||||
var { PropTypes } = React;
|
||||
findNodeHandle
|
||||
} from 'react-native'
|
||||
|
||||
var RCT_WEBVIEWBRIDGE_REF = 'webviewbridge';
|
||||
import invariant from 'fbjs/lib/invariant'
|
||||
import keyMirror from 'fbjs/lib/keyMirror'
|
||||
|
||||
var WebViewBridgeState = keyMirror({
|
||||
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
|
||||
import processDecelerationRate from 'react-native/Libraries/Components/ScrollView/processDecelerationRate'
|
||||
import deprecatedPropType from 'react-native/Libraries/Utilities/deprecatedPropType'
|
||||
|
||||
import { encode, decode } from '../core/base64'
|
||||
|
||||
const { WebViewBridgeManager } = NativeModules
|
||||
|
||||
var RCT_WEBVIEW_REF = 'webview';
|
||||
|
||||
var WebViewState = keyMirror({
|
||||
IDLE: null,
|
||||
LOADING: null,
|
||||
ERROR: null,
|
||||
});
|
||||
|
||||
var RCTWebViewBridge = requireNativeComponent('RCTWebViewBridge', WebViewBridge);
|
||||
var defaultRenderLoading = () => (
|
||||
<View style={styles.loadingView}>
|
||||
<ActivityIndicator
|
||||
style={styles.loadingProgressBar}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
|
||||
/**
|
||||
* Renders a native WebView.
|
||||
*/
|
||||
var WebViewBridge = React.createClass({
|
||||
class WebView extends React.Component {
|
||||
static propTypes = {
|
||||
...View.propTypes,
|
||||
renderError: PropTypes.func,
|
||||
renderLoading: PropTypes.func,
|
||||
onLoad: PropTypes.func,
|
||||
onLoadEnd: PropTypes.func,
|
||||
onLoadStart: PropTypes.func,
|
||||
onError: PropTypes.func,
|
||||
automaticallyAdjustContentInsets: PropTypes.bool,
|
||||
contentInset: EdgeInsetsPropType,
|
||||
onNavigationStateChange: PropTypes.func,
|
||||
onContentSizeChange: PropTypes.func,
|
||||
startInLoadingState: PropTypes.bool, // force WebView to show loadingView on first load
|
||||
style: View.propTypes.style,
|
||||
|
||||
propTypes: {
|
||||
...RCTWebViewBridge.propTypes,
|
||||
html: deprecatedPropType(
|
||||
PropTypes.string,
|
||||
'Use the `source` prop instead.'
|
||||
),
|
||||
|
||||
url: deprecatedPropType(
|
||||
PropTypes.string,
|
||||
'Use the `source` prop instead.'
|
||||
),
|
||||
|
||||
/**
|
||||
* Will be called once the message is being sent from webview
|
||||
* Loads static html or a uri (with optional headers) in the WebView.
|
||||
*/
|
||||
source: PropTypes.oneOfType([
|
||||
PropTypes.shape({
|
||||
/*
|
||||
* The URI to load in the WebView. Can be a local or remote file.
|
||||
*/
|
||||
uri: PropTypes.string,
|
||||
/*
|
||||
* The HTTP Method to use. Defaults to GET if not specified.
|
||||
* NOTE: On Android, only GET and POST are supported.
|
||||
*/
|
||||
method: PropTypes.oneOf(['GET', 'POST']),
|
||||
/*
|
||||
* Additional HTTP headers to send with the request.
|
||||
* NOTE: On Android, this can only be used with GET requests.
|
||||
*/
|
||||
headers: PropTypes.object,
|
||||
/*
|
||||
* The HTTP body to send with the request. This must be a valid
|
||||
* UTF-8 string, and will be sent exactly as specified, with no
|
||||
* additional encoding (e.g. URL-escaping or base64) applied.
|
||||
* NOTE: On Android, this can only be used with POST requests.
|
||||
*/
|
||||
body: PropTypes.string,
|
||||
}),
|
||||
PropTypes.shape({
|
||||
/*
|
||||
* A static HTML page to display in the WebView.
|
||||
*/
|
||||
html: PropTypes.string,
|
||||
/*
|
||||
* The base URL to be used for any relative links in the HTML.
|
||||
*/
|
||||
baseUrl: PropTypes.string,
|
||||
}),
|
||||
/*
|
||||
* Used internally by packager.
|
||||
*/
|
||||
PropTypes.number,
|
||||
]),
|
||||
|
||||
/**
|
||||
* Used on Android only, JS is enabled by default for WebView on iOS
|
||||
* @platform android
|
||||
*/
|
||||
javaScriptEnabled: PropTypes.bool,
|
||||
|
||||
/**
|
||||
* Used on Android only, controls whether DOM Storage is enabled or not
|
||||
* @platform android
|
||||
*/
|
||||
domStorageEnabled: PropTypes.bool,
|
||||
|
||||
/**
|
||||
* Sets the JS to be injected when the webpage loads.
|
||||
*/
|
||||
injectedJavaScript: PropTypes.string,
|
||||
|
||||
/**
|
||||
* Sets whether the webpage scales to fit the view and the user can change the scale.
|
||||
*/
|
||||
scalesPageToFit: PropTypes.bool,
|
||||
|
||||
/**
|
||||
* Sets the user-agent for this WebView. The user-agent can also be set in native using
|
||||
* WebViewConfig. This prop will overwrite that config.
|
||||
*/
|
||||
userAgent: PropTypes.string,
|
||||
|
||||
/**
|
||||
* Used to locate this view in end-to-end tests.
|
||||
*/
|
||||
testID: PropTypes.string,
|
||||
|
||||
/**
|
||||
* Determines whether HTML5 audio & videos require the user to tap before they can
|
||||
* start playing. The default value is `false`.
|
||||
*/
|
||||
mediaPlaybackRequiresUserAction: PropTypes.bool,
|
||||
|
||||
onBridgeMessage: PropTypes.func,
|
||||
},
|
||||
rpc: PropTypes.bool
|
||||
};
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
viewState: WebViewBridgeState.IDLE,
|
||||
lastErrorEvent: null,
|
||||
startInLoadingState: true,
|
||||
};
|
||||
},
|
||||
static defaultProps = {
|
||||
javaScriptEnabled : true,
|
||||
scalesPageToFit: true,
|
||||
};
|
||||
|
||||
|
||||
componentWillMount: function() {
|
||||
DeviceEventEmitter.addListener("webViewBridgeMessage", (body) => {
|
||||
const { onBridgeMessage } = this.props;
|
||||
const message = body.message;
|
||||
if (onBridgeMessage) {
|
||||
onBridgeMessage(message);
|
||||
}
|
||||
});
|
||||
state = {
|
||||
viewState: WebViewState.IDLE,
|
||||
lastErrorEvent: null,
|
||||
startInLoadingState: true,
|
||||
};
|
||||
|
||||
componentWillMount() {
|
||||
if (this.props.startInLoadingState) {
|
||||
this.setState({viewState: WebViewBridgeState.LOADING});
|
||||
this.setState({viewState: WebViewState.LOADING});
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
render: function() {
|
||||
render() {
|
||||
var otherView = null;
|
||||
|
||||
if (this.state.viewState === WebViewBridgeState.LOADING) {
|
||||
otherView = this.props.renderLoading && this.props.renderLoading();
|
||||
} else if (this.state.viewState === WebViewBridgeState.ERROR) {
|
||||
if (this.state.viewState === WebViewState.LOADING) {
|
||||
otherView = (this.props.renderLoading || defaultRenderLoading)();
|
||||
} else if (this.state.viewState === WebViewState.ERROR) {
|
||||
var errorEvent = this.state.lastErrorEvent;
|
||||
otherView = this.props.renderError && this.props.renderError(
|
||||
errorEvent.domain,
|
||||
errorEvent.code,
|
||||
errorEvent.description);
|
||||
} else if (this.state.viewState !== WebViewBridgeState.IDLE) {
|
||||
} else if (this.state.viewState !== WebViewState.IDLE) {
|
||||
console.error('RCTWebViewBridge invalid state encountered: ' + this.state.loading);
|
||||
}
|
||||
|
||||
var webViewStyles = [styles.container, this.props.style];
|
||||
if (this.state.viewState === WebViewBridgeState.LOADING ||
|
||||
this.state.viewState === WebViewBridgeState.ERROR) {
|
||||
if (this.state.viewState === WebViewState.LOADING ||
|
||||
this.state.viewState === WebViewState.ERROR) {
|
||||
// if we're in either LOADING or ERROR states, don't show the webView
|
||||
webViewStyles.push(styles.hidden);
|
||||
}
|
||||
|
||||
var {javaScriptEnabled, domStorageEnabled} = this.props;
|
||||
if (this.props.javaScriptEnabledAndroid) {
|
||||
console.warn('javaScriptEnabledAndroid is deprecated. Use javaScriptEnabled instead');
|
||||
javaScriptEnabled = this.props.javaScriptEnabledAndroid;
|
||||
}
|
||||
if (this.props.domStorageEnabledAndroid) {
|
||||
console.warn('domStorageEnabledAndroid is deprecated. Use domStorageEnabled instead');
|
||||
domStorageEnabled = this.props.domStorageEnabledAndroid;
|
||||
var source = this.props.source || {};
|
||||
if (this.props.html) {
|
||||
source.html = this.props.html;
|
||||
} else if (this.props.url) {
|
||||
source.uri = this.props.url;
|
||||
}
|
||||
|
||||
let {source, ...props} = {...this.props};
|
||||
if (source.method === 'POST' && source.headers) {
|
||||
console.warn('WebView: `source.headers` is not supported when using POST.');
|
||||
} else if (source.method === 'GET' && source.body) {
|
||||
console.warn('WebView: `source.body` is not supported when using GET.');
|
||||
}
|
||||
|
||||
var webView =
|
||||
<RCTWebViewBridge
|
||||
ref={RCT_WEBVIEWBRIDGE_REF}
|
||||
ref={RCT_WEBVIEW_REF}
|
||||
key="webViewKey"
|
||||
javaScriptEnabled={true}
|
||||
{...props}
|
||||
source={resolveAssetSource(source)}
|
||||
style={webViewStyles}
|
||||
source={resolveAssetSource(source)}
|
||||
scalesPageToFit={this.props.scalesPageToFit}
|
||||
injectedJavaScript={this.props.injectedJavaScript}
|
||||
userAgent={this.props.userAgent}
|
||||
javaScriptEnabled={this.props.javaScriptEnabled}
|
||||
domStorageEnabled={this.props.domStorageEnabled}
|
||||
contentInset={this.props.contentInset}
|
||||
automaticallyAdjustContentInsets={this.props.automaticallyAdjustContentInsets}
|
||||
onContentSizeChange={this.props.onContentSizeChange}
|
||||
onLoadingStart={this.onLoadingStart}
|
||||
onLoadingFinish={this.onLoadingFinish}
|
||||
onLoadingError={this.onLoadingError}
|
||||
onChange={this.onMessage}
|
||||
testID={this.props.testID}
|
||||
mediaPlaybackRequiresUserAction={this.props.mediaPlaybackRequiresUserAction}
|
||||
onBridgeMessage={this.onBridgeMessage}
|
||||
rpc={!!this.props.rpc}
|
||||
/>;
|
||||
|
||||
return (
|
||||
@@ -136,89 +247,116 @@ var WebViewBridge = React.createClass({
|
||||
{otherView}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
}
|
||||
|
||||
onMessage(event) {
|
||||
if (this.props.onBridgeMessage != null && event.nativeEvent != null) {
|
||||
this.props.onBridgeMessage(event.nativeEvent.message)
|
||||
}
|
||||
},
|
||||
|
||||
goForward: function() {
|
||||
goForward = () => {
|
||||
UIManager.dispatchViewManagerCommand(
|
||||
this.getWebViewBridgeHandle(),
|
||||
this.getWebViewHandle(),
|
||||
UIManager.RCTWebViewBridge.Commands.goForward,
|
||||
null
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
goBack: function() {
|
||||
goBack = () => {
|
||||
UIManager.dispatchViewManagerCommand(
|
||||
this.getWebViewBridgeHandle(),
|
||||
this.getWebViewHandle(),
|
||||
UIManager.RCTWebViewBridge.Commands.goBack,
|
||||
null
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
reload: function() {
|
||||
reload = () => {
|
||||
UIManager.dispatchViewManagerCommand(
|
||||
this.getWebViewBridgeHandle(),
|
||||
this.getWebViewHandle(),
|
||||
UIManager.RCTWebViewBridge.Commands.reload,
|
||||
null
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
sendToBridge: function (message: string) {
|
||||
stopLoading = () => {
|
||||
UIManager.dispatchViewManagerCommand(
|
||||
this.getWebViewBridgeHandle(),
|
||||
UIManager.RCTWebViewBridge.Commands.sendToBridge,
|
||||
[message]
|
||||
this.getWebViewHandle(),
|
||||
UIManager.RCTWebViewBridge.Commands.stopLoading,
|
||||
null
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* We return an event with a bunch of fields including:
|
||||
* url, title, loading, canGoBack, canGoForward
|
||||
*/
|
||||
updateNavigationState: function(event) {
|
||||
updateNavigationState = (event) => {
|
||||
if (this.props.onNavigationStateChange) {
|
||||
this.props.onNavigationStateChange(event.nativeEvent);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
getWebViewBridgeHandle: function() {
|
||||
return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEWBRIDGE_REF]);
|
||||
},
|
||||
onBridgeMessage = (event: Event) => {
|
||||
const { onBridgeMessage } = this.props;
|
||||
const messages = event.nativeEvent.messages;
|
||||
if (onBridgeMessage) {
|
||||
messages.forEach((message) => {
|
||||
onBridgeMessage(decode(message));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onLoadingStart: function(event) {
|
||||
sendToBridge = (message: any) => {
|
||||
WebViewBridgeManager.sendToBridge(this.getWebViewHandle(), encode(message));
|
||||
};
|
||||
|
||||
getWebViewHandle = () => {
|
||||
return findNodeHandle(this.refs[RCT_WEBVIEW_REF]);
|
||||
};
|
||||
|
||||
onLoadingStart = (event) => {
|
||||
var onLoadStart = this.props.onLoadStart;
|
||||
onLoadStart && onLoadStart(event);
|
||||
this.updateNavigationState(event);
|
||||
},
|
||||
};
|
||||
|
||||
onLoadingError: function(event) {
|
||||
onLoadingError = (event) => {
|
||||
event.persist(); // persist this event because we need to store it
|
||||
var {onError, onLoadEnd} = this.props;
|
||||
onError && onError(event);
|
||||
onLoadEnd && onLoadEnd(event);
|
||||
console.warn('Encountered an error loading page', event.nativeEvent);
|
||||
|
||||
this.setState({
|
||||
lastErrorEvent: event.nativeEvent,
|
||||
viewState: WebViewBridgeState.ERROR
|
||||
viewState: WebViewState.ERROR
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
onLoadingFinish = (event) => {
|
||||
var { onLoad, onLoadEnd, rpc } = this.props;
|
||||
|
||||
//we need to inject WebViewBridge and RPC once the page is loaded
|
||||
UIManager.dispatchViewManagerCommand(
|
||||
this.getWebViewHandle(),
|
||||
UIManager.RCTWebViewBridge.Commands.injectWebViewBridge,
|
||||
null
|
||||
);
|
||||
|
||||
//check if RPC falg is also on
|
||||
if (rps) {
|
||||
UIManager.dispatchViewManagerCommand(
|
||||
this.getWebViewHandle(),
|
||||
UIManager.RCTWebViewBridge.Commands.injectRPC,
|
||||
null
|
||||
);
|
||||
}
|
||||
|
||||
onLoadingFinish: function(event) {
|
||||
var {onLoad, onLoadEnd} = this.props;
|
||||
onLoad && onLoad(event);
|
||||
onLoadEnd && onLoadEnd(event);
|
||||
this.setState({
|
||||
viewState: WebViewBridgeState.IDLE,
|
||||
viewState: WebViewState.IDLE,
|
||||
});
|
||||
this.updateNavigationState(event);
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
var RCTWebViewBridge = requireNativeComponent('RCTWebViewBridge', WebView);
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
container: {
|
||||
@@ -228,6 +366,14 @@ var styles = StyleSheet.create({
|
||||
height: 0,
|
||||
flex: 0, // disable 'flex:1' when hiding a View
|
||||
},
|
||||
loadingView: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loadingProgressBar: {
|
||||
height: 20,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = WebViewBridge;
|
||||
module.exports = WebView;
|
||||
|
||||
Reference in New Issue
Block a user