diff --git a/Examples/UIExplorer/WebViewExample.js b/Examples/UIExplorer/WebViewExample.js
index 057a00161..8813a8afd 100644
--- a/Examples/UIExplorer/WebViewExample.js
+++ b/Examples/UIExplorer/WebViewExample.js
@@ -18,7 +18,6 @@
var React = require('react-native');
var StyleSheet = require('StyleSheet');
var {
- ActivityIndicatorIOS,
StyleSheet,
Text,
TextInput,
@@ -95,8 +94,6 @@ var WebViewExample = React.createClass({
automaticallyAdjustContentInsets={false}
style={styles.webView}
url={this.state.url}
- renderError={this.renderError}
- renderLoading={this.renderLoading}
onNavigationStateChange={this.onNavigationStateChange}
startInLoadingState={true}
/>
@@ -129,33 +126,6 @@ var WebViewExample = React.createClass({
});
},
- renderError: function(errorDomain, errorCode, errorDesc) {
- return (
-
-
- Error loading page
-
-
- {'Domain: ' + errorDomain}
-
-
- {'Error Code: ' + errorCode}
-
-
- {'Description: ' + errorDesc}
-
-
- );
- },
-
- renderLoading: function() {
- return (
-
-
-
- );
- },
-
onSubmitEditing: function(event) {
this.pressGoButton();
},
@@ -230,28 +200,6 @@ var styles = StyleSheet.create({
borderRadius: 3,
alignSelf: 'stretch',
},
- loadingView: {
- backgroundColor: BGWASH,
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- errorContainer: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: BGWASH,
- },
- errorTextTitle: {
- fontSize: 15,
- fontWeight: '500',
- marginBottom: 10,
- },
- errorText: {
- fontSize: 14,
- textAlign: 'center',
- marginBottom: 2,
- },
statusBar: {
flexDirection: 'row',
alignItems: 'center',
diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js
index f05e2f61b..83c90a1fd 100644
--- a/Libraries/Components/WebView/WebView.ios.js
+++ b/Libraries/Components/WebView/WebView.ios.js
@@ -11,10 +11,12 @@
*/
'use strict';
+var ActivityIndicatorIOS = require('ActivityIndicatorIOS');
var EdgeInsetsPropType = require('EdgeInsetsPropType');
var React = require('React');
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
var StyleSheet = require('StyleSheet');
+var Text = require('Text');
var View = require('View');
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
@@ -27,6 +29,7 @@ var RCTWebViewManager = require('NativeModules').WebViewManager;
var invariant = require('invariant');
+var BGWASH = 'rgba(255,255,255,0.8)';
var RCT_WEBVIEW_REF = 'webview';
var WebViewState = keyMirror({
@@ -52,16 +55,38 @@ type ErrorEvent = {
type Event = Object;
+var defaultRenderLoading = () => (
+
+
+
+);
+var defaultRenderError = (errorDomain, errorCode, errorDesc) => (
+
+
+ Error loading page
+
+
+ {'Domain: ' + errorDomain}
+
+
+ {'Error Code: ' + errorCode}
+
+
+ {'Description: ' + errorDesc}
+
+
+);
+
var WebView = React.createClass({
statics: {
NavigationType: NavigationType,
},
propTypes: {
- renderError: PropTypes.func.isRequired, // view to show if there's an error
- renderLoading: PropTypes.func.isRequired, // loading indicator to show
url: PropTypes.string,
html: PropTypes.string,
+ renderError: PropTypes.func, // view to show if there's an error
+ renderLoading: PropTypes.func, // loading indicator to show
automaticallyAdjustContentInsets: PropTypes.bool,
shouldInjectAJAXHandler: PropTypes.bool,
contentInset: EdgeInsetsPropType,
@@ -87,20 +112,23 @@ var WebView = React.createClass({
render: function() {
var otherView = null;
- if (this.state.viewState === WebViewState.LOADING) {
- otherView = this.props.renderLoading();
+ if (this.state.viewState === WebViewState.LOADING) {
+ otherView = (this.props.renderLoading || defaultRenderLoading)();
} else if (this.state.viewState === WebViewState.ERROR) {
var errorEvent = this.state.lastErrorEvent;
invariant(
errorEvent != null,
'lastErrorEvent expected to be non-null'
);
- otherView = this.props.renderError(
+ otherView = (this.props.renderError || defaultRenderError)(
errorEvent.domain,
errorEvent.code,
- errorEvent.description);
+ errorEvent.description
+ );
} else if (this.state.viewState !== WebViewState.IDLE) {
- console.error('RCTWebView invalid state encountered: ' + this.state.loading);
+ console.error(
+ 'RCTWebView invalid state encountered: ' + this.state.loading
+ );
}
var webViewStyles = [styles.container, this.props.style];
@@ -196,10 +224,32 @@ var styles = StyleSheet.create({
container: {
flex: 1,
},
+ errorContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: BGWASH,
+ },
+ errorText: {
+ fontSize: 14,
+ textAlign: 'center',
+ marginBottom: 2,
+ },
+ errorTextTitle: {
+ fontSize: 15,
+ fontWeight: '500',
+ marginBottom: 10,
+ },
hidden: {
height: 0,
flex: 0, // disable 'flex:1' when hiding a View
},
+ loadingView: {
+ backgroundColor: BGWASH,
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
});
module.exports = WebView;