Add default render loading on Android WebView

Summary:I just noticed that Android WebView do not have a render loading default like iOS, so I added one.

**Test plan**

I used WebView without renderLoading on Android.

![image](https://cloud.githubusercontent.com/assets/7189823/14028408/bd94c83e-f1d2-11e5-8791-3372684b429e.png)
Closes https://github.com/facebook/react-native/pull/6635

Differential Revision: D3126416

Pulled By: andreicoman11

fb-gh-sync-id: 422966ba3dd6912cbcb0b540e26a3ec48c85daea
fbshipit-source-id: 422966ba3dd6912cbcb0b540e26a3ec48c85daea
This commit is contained in:
Nicolas Charpentier 2016-04-01 08:04:11 -07:00 committed by Facebook Github Bot 0
parent dac028d496
commit a74d05be62
1 changed files with 19 additions and 1 deletions

View File

@ -11,6 +11,7 @@
'use strict'; 'use strict';
var EdgeInsetsPropType = require('EdgeInsetsPropType'); var EdgeInsetsPropType = require('EdgeInsetsPropType');
var ProgressBarAndroid = require('ProgressBarAndroid');
var React = require('React'); var React = require('React');
var ReactNativeViewAttributes = require('ReactNativeViewAttributes'); var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
var StyleSheet = require('StyleSheet'); var StyleSheet = require('StyleSheet');
@ -33,6 +34,15 @@ var WebViewState = keyMirror({
ERROR: null, ERROR: null,
}); });
var defaultRenderLoading = () => (
<View style={styles.loadingView}>
<ProgressBarAndroid
style={styles.loadingProgressBar}
styleAttr="Inverse"
/>
</View>
);
/** /**
* Renders a native WebView. * Renders a native WebView.
*/ */
@ -170,7 +180,7 @@ var WebView = React.createClass({
var otherView = null; var otherView = null;
if (this.state.viewState === WebViewState.LOADING) { if (this.state.viewState === WebViewState.LOADING) {
otherView = this.props.renderLoading && this.props.renderLoading(); otherView = (this.props.renderLoading || defaultRenderLoading)();
} else if (this.state.viewState === WebViewState.ERROR) { } else if (this.state.viewState === WebViewState.ERROR) {
var errorEvent = this.state.lastErrorEvent; var errorEvent = this.state.lastErrorEvent;
otherView = this.props.renderError && this.props.renderError( otherView = this.props.renderError && this.props.renderError(
@ -307,6 +317,14 @@ var styles = StyleSheet.create({
height: 0, height: 0,
flex: 0, // disable 'flex:1' when hiding a View flex: 0, // disable 'flex:1' when hiding a View
}, },
loadingView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
loadingProgressBar: {
height: 20,
},
}); });
module.exports = WebView; module.exports = WebView;