#8 Show "reload" button when network error occured

App.js

@@ -38,6 +38,7 @@ import RNIap, {
 import { initialMode, useDarkMode, DynamicStyleSheet, DynamicValue, useDynamicStyleSheet, eventEmitter } from 'react-native-dark-mode';
 import JitsiMeet, { JitsiMeetView } from 'react-native-jitsi-meet';
 import VideoCall from './VideoCall';
+import ErrorPage from './ErrorPage';
 
 import { version } from './package.json';
 
@@ -304,6 +305,12 @@ export default class App extends Component<Props> {
         });
     }
 
+    onWebViewRenderError () {
+        return (
+            <ErrorPage onReload={() => (this.reload())}></ErrorPage>
+        );
+    }
+
     reload() {
         this.refs.webView1.reload();
     }
@@ -580,6 +587,7 @@ export default class App extends Component<Props> {
                     allowFileAccess={true}
                     onLoad={this.onWebViewLoadEnd.bind(this)}
                     onLoadStart={this.onWebViewLoadStart.bind(this)}
+                    renderError={this.onWebViewRenderError.bind(this)}
                 />
         );
         return (

ErrorPage.js

@@ -0,0 +1,44 @@
+
+import React, { Component } from 'react';
+import { StyleSheet } from 'react-native';
+import { View, Container, Text, Icon, Button } from 'native-base';
+
+class ErrorPage extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <Container style={styles.container}>
+                <Icon style={styles.icon} name="frown" type="FontAwesome5" />
+                <Text style={styles.text}>Ops, something went wrong...</Text>
+                <View style={styles.buttonContainer}>
+                    <Button onPress={this.props.onReload}><Text>Retry</Text></Button>
+                </View>
+            </Container>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        flex: 999999999999
+    },
+    icon: {
+        fontSize: 100, 
+        color: '#666',
+    },
+    text: {
+        color: '#666',
+        marginTop: 20, 
+        marginBottom: 20
+    },
+    buttonContainer: {
+        justifyContent: 'center', 
+        alignItems: 'center'
+    }
+});
+
+export default ErrorPage;