feat(loading): Changed loading/error rendering (#612)

react-native-webview · Jun 2, 2019 · d429e82 · d429e82
1 parent 3f3bcfc
commit d429e82
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 31 deletions.
diff --git a/src/WebView.android.tsx b/src/WebView.android.tsx
@@ -244,13 +244,6 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
     }
 
     const webViewStyles = [styles.container, styles.webView, style];
-    if (
-      this.state.viewState === 'LOADING'
-      || this.state.viewState === 'ERROR'
-    ) {
-      // if we're in either LOADING or ERROR states, don't show the webView
-      webViewStyles.push(styles.hidden);
-    }
 
     if (source && 'method' in source) {
       if (source.method === 'POST' && source.headers) {

diff --git a/src/WebView.ios.tsx b/src/WebView.ios.tsx
@@ -346,13 +346,6 @@ class WebView extends React.Component<IOSWebViewProps, State> {
     }
 
     const webViewStyles = [styles.container, styles.webView, style];
-    if (
-      this.state.viewState === 'LOADING'
-      || this.state.viewState === 'ERROR'
-    ) {
-      // if we're in either LOADING or ERROR states, don't show the webView
-      webViewStyles.push(styles.hidden);
-    }
 
     const onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(
       this.onShouldStartLoadWithRequestCallback,

diff --git a/src/WebView.styles.ts b/src/WebView.styles.ts
@@ -2,11 +2,9 @@ import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
 interface Styles {
   container: ViewStyle;
-  errorContainer: ViewStyle;
   errorText: TextStyle;
   errorTextTitle: TextStyle;
-  hidden: ViewStyle;
-  loadingView: ViewStyle;
+  loadingOrErrorView: ViewStyle;
   webView: ViewStyle;
   loadingProgressBar: ViewStyle;
 }
@@ -16,21 +14,14 @@ const styles = StyleSheet.create<Styles>({
     flex: 1,
     overflow: 'hidden',
   },
-  errorContainer: {
+  loadingOrErrorView: {
+    position: 'absolute',
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'white',
-  },
-  hidden: {
-    height: 0,
-    flex: 0, // disable 'flex:1' when hiding a View
-  },
-  loadingView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
+    height: '100%',
+    width: '100%',
+    backgroundColor: 'white'
   },
   loadingProgressBar: {
     height: 20,

diff --git a/src/WebViewShared.tsx b/src/WebViewShared.tsx
@@ -75,7 +75,7 @@ const getViewManagerConfig = (
 };
 
 const defaultRenderLoading = () => (
-  <View style={styles.loadingView}>
+  <View style={styles.loadingOrErrorView}>
     <ActivityIndicator />
   </View>
 );
@@ -84,7 +84,7 @@ const defaultRenderError = (
   errorCode: number,
   errorDesc: string,
 ) => (
-  <View style={styles.errorContainer}>
+  <View style={styles.loadingOrErrorView}>
     <Text style={styles.errorTextTitle}>Error loading page</Text>
     <Text style={styles.errorText}>{`Domain: ${errorDomain}`}</Text>
     <Text style={styles.errorText}>{`Error Code: ${errorCode}`}</Text>