Ver código fonte

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

Penar Musaraj 5 anos atrás
pai
commit
d429e82c3a
4 arquivos alterados com 8 adições e 31 exclusões
  1. 0
    7
      src/WebView.android.tsx
  2. 0
    7
      src/WebView.ios.tsx
  3. 6
    15
      src/WebView.styles.ts
  4. 2
    2
      src/WebViewShared.tsx

+ 0
- 7
src/WebView.android.tsx Ver arquivo

@@ -244,13 +244,6 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
244 244
     }
245 245
 
246 246
     const webViewStyles = [styles.container, styles.webView, style];
247
-    if (
248
-      this.state.viewState === 'LOADING'
249
-      || this.state.viewState === 'ERROR'
250
-    ) {
251
-      // if we're in either LOADING or ERROR states, don't show the webView
252
-      webViewStyles.push(styles.hidden);
253
-    }
254 247
 
255 248
     if (source && 'method' in source) {
256 249
       if (source.method === 'POST' && source.headers) {

+ 0
- 7
src/WebView.ios.tsx Ver arquivo

@@ -346,13 +346,6 @@ class WebView extends React.Component<IOSWebViewProps, State> {
346 346
     }
347 347
 
348 348
     const webViewStyles = [styles.container, styles.webView, style];
349
-    if (
350
-      this.state.viewState === 'LOADING'
351
-      || this.state.viewState === 'ERROR'
352
-    ) {
353
-      // if we're in either LOADING or ERROR states, don't show the webView
354
-      webViewStyles.push(styles.hidden);
355
-    }
356 349
 
357 350
     const onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(
358 351
       this.onShouldStartLoadWithRequestCallback,

+ 6
- 15
src/WebView.styles.ts Ver arquivo

@@ -2,11 +2,9 @@ import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
2 2
 
3 3
 interface Styles {
4 4
   container: ViewStyle;
5
-  errorContainer: ViewStyle;
6 5
   errorText: TextStyle;
7 6
   errorTextTitle: TextStyle;
8
-  hidden: ViewStyle;
9
-  loadingView: ViewStyle;
7
+  loadingOrErrorView: ViewStyle;
10 8
   webView: ViewStyle;
11 9
   loadingProgressBar: ViewStyle;
12 10
 }
@@ -16,21 +14,14 @@ const styles = StyleSheet.create<Styles>({
16 14
     flex: 1,
17 15
     overflow: 'hidden',
18 16
   },
19
-  errorContainer: {
17
+  loadingOrErrorView: {
18
+    position: 'absolute',
20 19
     flex: 1,
21 20
     justifyContent: 'center',
22 21
     alignItems: 'center',
23
-    backgroundColor: 'white',
24
-  },
25
-  hidden: {
26
-    height: 0,
27
-    flex: 0, // disable 'flex:1' when hiding a View
28
-  },
29
-  loadingView: {
30
-    flex: 1,
31
-    justifyContent: 'center',
32
-    alignItems: 'center',
33
-    backgroundColor: 'white',
22
+    height: '100%',
23
+    width: '100%',
24
+    backgroundColor: 'white'
34 25
   },
35 26
   loadingProgressBar: {
36 27
     height: 20,

+ 2
- 2
src/WebViewShared.tsx Ver arquivo

@@ -75,7 +75,7 @@ const getViewManagerConfig = (
75 75
 };
76 76
 
77 77
 const defaultRenderLoading = () => (
78
-  <View style={styles.loadingView}>
78
+  <View style={styles.loadingOrErrorView}>
79 79
     <ActivityIndicator />
80 80
   </View>
81 81
 );
@@ -84,7 +84,7 @@ const defaultRenderError = (
84 84
   errorCode: number,
85 85
   errorDesc: string,
86 86
 ) => (
87
-  <View style={styles.errorContainer}>
87
+  <View style={styles.loadingOrErrorView}>
88 88
     <Text style={styles.errorTextTitle}>Error loading page</Text>
89 89
     <Text style={styles.errorText}>{`Domain: ${errorDomain}`}</Text>
90 90
     <Text style={styles.errorText}>{`Error Code: ${errorCode}`}</Text>