Display custom error view on webview error

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',

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'}
+                />}
             />
         );
     }