Browse Source

Display custom error view on webview error

Arnaud Vergnet 4 years ago
parent
commit
cb98e1c546
2 changed files with 13 additions and 2 deletions
  1. 5
    2
      components/Custom/NetworkErrorComponent.js
  2. 8
    0
      components/Screens/WebViewScreen.js

+ 5
- 2
components/Custom/NetworkErrorComponent.js View File

@@ -32,7 +32,10 @@ class NetworkErrorComponent extends React.PureComponent<Props, State> {
32 32
 
33 33
     render() {
34 34
         return (
35
-            <View style={styles.outer}>
35
+            <View style={{
36
+                ...styles.outer,
37
+                backgroundColor: this.colors.background
38
+            }}>
36 39
                 <View style={styles.inner}>
37 40
                     <View style={styles.iconContainer}>
38 41
                         <MaterialCommunityIcons
@@ -62,7 +65,7 @@ class NetworkErrorComponent extends React.PureComponent<Props, State> {
62 65
 
63 66
 const styles = StyleSheet.create({
64 67
     outer: {
65
-        flex: 1,
68
+        height: '100%',
66 69
     },
67 70
     inner: {
68 71
         marginTop: 'auto',

+ 8
- 0
components/Screens/WebViewScreen.js View File

@@ -5,6 +5,8 @@ import WebView from "react-native-webview";
5 5
 import {withTheme} from 'react-native-paper';
6 6
 import HeaderButton from "../Custom/HeaderButton";
7 7
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
8
+import NetworkErrorComponent from "../Custom/NetworkErrorComponent";
9
+import i18n from "i18n-js";
8 10
 
9 11
 type Props = {
10 12
     navigation: Object,
@@ -104,6 +106,12 @@ class WebViewScreen extends React.PureComponent<Props> {
104 106
                 injectedJavaScript={this.props.data[0]['customJS']}
105 107
                 javaScriptEnabled={true}
106 108
                 renderLoading={this.getRenderLoading}
109
+                renderError={() => <NetworkErrorComponent
110
+                    {...this.props}
111
+                    onRefresh={this.onRefreshClicked}
112
+                    message={i18n.t("loginScreen.errors.connection")}
113
+                    icon={'access-point-network-off'}
114
+                />}
107 115
             />
108 116
         );
109 117
     }

Loading…
Cancel
Save