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;