From cb98e1c5464616e1cddb8312dd6dd76185ce8313 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Thu, 2 Apr 2020 13:27:25 +0200
Subject: [PATCH] Display custom error view on webview error

---
 components/Custom/NetworkErrorComponent.js | 7 +++++--
 components/Screens/WebViewScreen.js        | 8 ++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/components/Custom/NetworkErrorComponent.js b/components/Custom/NetworkErrorComponent.js
index 4afe444..110e908 100644
--- a/components/Custom/NetworkErrorComponent.js
+++ b/components/Custom/NetworkErrorComponent.js
@@ -32,7 +32,10 @@ class NetworkErrorComponent extends React.PureComponent<Props, State> {
 
     render() {
         return (
-            <View style={styles.outer}>
+            <View style={{
+                ...styles.outer,
+                backgroundColor: this.colors.background
+            }}>
                 <View style={styles.inner}>
                     <View style={styles.iconContainer}>
                         <MaterialCommunityIcons
@@ -62,7 +65,7 @@ class NetworkErrorComponent extends React.PureComponent<Props, State> {
 
 const styles = StyleSheet.create({
     outer: {
-        flex: 1,
+        height: '100%',
     },
     inner: {
         marginTop: 'auto',
diff --git a/components/Screens/WebViewScreen.js b/components/Screens/WebViewScreen.js
index 95d9067..66fb8a0 100644
--- a/components/Screens/WebViewScreen.js
+++ b/components/Screens/WebViewScreen.js
@@ -5,6 +5,8 @@ import WebView from "react-native-webview";
 import {withTheme} from 'react-native-paper';
 import HeaderButton from "../Custom/HeaderButton";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
+import NetworkErrorComponent from "../Custom/NetworkErrorComponent";
+import i18n from "i18n-js";
 
 type Props = {
     navigation: Object,
@@ -104,6 +106,12 @@ class WebViewScreen extends React.PureComponent<Props> {
                 injectedJavaScript={this.props.data[0]['customJS']}
                 javaScriptEnabled={true}
                 renderLoading={this.getRenderLoading}
+                renderError={() => <NetworkErrorComponent
+                    {...this.props}
+                    onRefresh={this.onRefreshClicked}
+                    message={i18n.t("loginScreen.errors.connection")}
+                    icon={'access-point-network-off'}
+                />}
             />
         );
     }