fix handle error

xcarpentier · Jan 7, 2020 · 0b8ef32 · 0b8ef32
1 parent f97b877
commit 0b8ef32
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 20 deletions.
diff --git a/App.tsx b/App.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import PdfReader from './src/'
+import { WebViewErrorEvent } from 'react-native-webview/lib/WebViewTypes'
+import { View, Text } from 'react-native'
 
 const base64 =
   'data:application/pdf;base64,JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
@@ -16,25 +18,44 @@ const base64 =
   'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
   'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'
 
-export default class App extends React.Component {
-  render() {
+function App() {
+  const [error, setError] = React.useState<WebViewErrorEvent | undefined>(
+    undefined,
+  )
+  if (error) {
     return (
-      <PdfReader
-        source={{
-          // uri: 'http://gahp.net/wp-content/uploads/2017/09/sample.pdf',
-          base64,
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: 15,
         }}
-        style={{ paddingTop: 20 }}
-        customStyle={{
-          readerContainerZoomContainer: {
-            borderRadius: 30,
-            backgroundColor: '#a0a',
-          },
-          readerContainerZoomContainerButton: {
-            borderRadius: 30,
-          },
-        }}
-      />
+      >
+        <Text style={{ color: 'red', textAlign: 'center' }}>
+          {error.nativeEvent.description}
+        </Text>
+      </View>
     )
   }
+  return (
+    <PdfReader
+      source={{
+        uri: 'http://gahp.net/wp-content/uploads/2017/09/sample.pdf',
+      }}
+      onError={setError}
+      style={{ paddingTop: 20 }}
+      customStyle={{
+        readerContainerZoomContainer: {
+          borderRadius: 30,
+          backgroundColor: '#a0a',
+        },
+        readerContainerZoomContainerButton: {
+          borderRadius: 30,
+        },
+      }}
+    />
+  )
 }
+
+export default App
diff --git a/src/index.tsx b/src/index.tsx
@@ -3,6 +3,10 @@ import * as CSS from 'csstype'
 import { View, ActivityIndicator, Platform, StyleSheet } from 'react-native'
 import { WebView } from 'react-native-webview'
 import * as FileSystem from 'expo-file-system'
+import {
+  WebViewErrorEvent,
+  WebViewNavigationEvent,
+} from 'react-native-webview/lib/WebViewTypes'
 
 const {
   cacheDirectory,
@@ -147,9 +151,9 @@ interface Props {
   webviewProps?: WebView['props']
   noLoader?: boolean
   customStyle?: CustomStyle
-  onLoad?(): void
-  onLoadEnd?(): void
-  onError?(): void
+  onLoad?(event: WebViewNavigationEvent): void
+  onLoadEnd?(event: WebViewNavigationEvent | WebViewErrorEvent): void
+  onError?(event: WebViewErrorEvent): void
 }
 
 interface State {