Merge pull request #8 from gustavo-em/handling_errors_on_load_webview

onError and onLoad in the loading webview

example/src/App.tsx

@@ -1,15 +1,46 @@
 import * as React from 'react';
 
-import { StyleSheet, View } from 'react-native';
+import { Alert, StyleSheet, Text, View } from 'react-native';
 import { BigbluebuttonMobile } from 'bigbluebutton-mobile-sdk';
+import type { INativeEvent } from './types';
 
 export default function App() {
+  const [loadComponent, setLoadComponent] = React.useState(true);
+
+  const handleOnError = React.useCallback((content: any) => {
+    const nativeEvent = content.nativeEvent as INativeEvent;
+    console.log(
+      `Error loading URL ${nativeEvent.url}: ${nativeEvent.description}`
+    );
+    setLoadComponent(false);
+    Alert.alert('Error loading URL', undefined, [
+      {
+        text: 'Cancel',
+        onPress: () => console.log('Cancel Pressed'),
+        style: 'cancel',
+      },
+      {
+        text: 'Retry',
+        onPress: () => {
+          console.log('Retry Pressed');
+          setLoadComponent(true);
+        },
+      },
+    ]);
+  }, []);
+
   return (
     <View style={styles.container}>
-      <BigbluebuttonMobile
-        url="https://mobile.bbb.imdt.dev"
-        style={styles.bbb}
-      />
+      {loadComponent ? (
+        <BigbluebuttonMobile
+          url="https://mobile.bbb.imdt.dev"
+          style={styles.bbb}
+          onError={(content: any) => handleOnError(content)}
+          onSuccess={() => console.log('URL Valid')}
+        />
+      ) : (
+        <Text style={styles.text}>Invalid URL</Text>
+      )}
     </View>
   );
 }
@@ -23,4 +54,10 @@ const styles = StyleSheet.create({
     marginTop: 48,
     flex: 1,
   },
+  text: {
+    marginTop: 48,
+    flex: 1,
+    justifyContent: 'center',
+    alignContent: 'center',
+  },
 });

example/src/types.ts

@@ -0,0 +1,12 @@
+export type INativeEvent = {
+  canGoBack: Boolean;
+  canGoForward: Boolean;
+  code: Number;
+  description: String;
+  didFailProvisionalNavigation: Boolean;
+  domain: String;
+  loading: Boolean;
+  target: Number;
+  title: String;
+  url: String;
+};

src/index.tsx

@@ -9,6 +9,8 @@ import * as onScreenShareSignalingStateChange from './events/onScreenShareSignal
 type BigbluebuttonMobileSdkProps = {
   url: string;
   style: ViewStyle;
+  onError?: any;
+  onSuccess?: any;
 };
 
 const renderPlatformSpecificComponents = () =>
@@ -20,6 +22,8 @@ const renderPlatformSpecificComponents = () =>
 export const BigbluebuttonMobile = ({
   url,
   style,
+  onError,
+  onSuccess,
 }: BigbluebuttonMobileSdkProps) => {
   const webViewRef = useRef(null);
 
@@ -38,6 +42,14 @@ export const BigbluebuttonMobile = ({
           style={{ ...style }}
           onMessage={(msg) => handleWebviewMessage(webViewRef, msg)}
           applicationNameForUserAgent="BBBMobile"
+          onLoadEnd={(content: any) => {
+            /*in case of success, the property code is not defined*/
+            if (typeof content.nativeEvent.code !== 'undefined') {
+              onError(content);
+            } else {
+              onSuccess(content);
+            }
+          }}
         />
       }
     </>