Merge pull request #185 from victorsoares96/fix/open-external-link

🩹 fix: open external link

README.md

@@ -99,6 +99,8 @@ export default function App() {
 | `defaultTheme`               | `object`      | Theme object. Optional.                                      |
 | `allowScriptedContent`       | `boolean`     | Allow run scripted content on sandbox. *Default is false on Android and true in iOS* |
 | `highlightOnSelect`          | `boolean`     | Highlight text on select. Default is true.                   |
+| `allowPopups`                | `boolean`     | Epubjs is rendering the epub-content inside and iframe which defaults to sandbox="allow-same-origin", to enable opening links or running javascript in an epub, you will need to pass this param. |
+| `onPressExternalLink`        | `function`    | Function that is invoked when external link is pressed. When used, the `allowPopups` property is automatically enabled |
 
 ## Hooks
 

example-bare/App.tsx

@@ -8,6 +8,7 @@ import {
   CustomThemes,
   InitialLocation,
   Search,
+  OpenExternalLink,
 } from './examples';
 
 const { Navigator, Screen } = createNativeStackNavigator();
@@ -59,6 +60,12 @@ export const examples = [
     route: 'Search',
     component: Search,
   },
+  {
+    title: 'Open External Link',
+    description: 'Handle opening external links in epub',
+    route: 'OpenExternalLink',
+    component: OpenExternalLink,
+  },
 ];
 
 function Examples() {

example-bare/examples/OpenExternalLink/index.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Linking, SafeAreaView, useWindowDimensions } from 'react-native';
+import { Reader, ReaderProvider } from '@epubjs-react-native/core';
+import { useFileSystem } from '@epubjs-react-native/file-system';
+
+export function OpenExternalLink() {
+  const { width, height } = useWindowDimensions();
+
+  return (
+    <SafeAreaView>
+      <ReaderProvider>
+        <Reader
+          src="https://github.com/IDPF/epub3-samples/releases/download/20230704/accessible_epub_3.epub"
+          width={width}
+          height={height}
+          fileSystem={useFileSystem}
+          initialLocation="pr01s04.xhtml"
+          onPressExternalLink={(url) => {
+            Linking.openURL(url);
+          }}
+        />
+      </ReaderProvider>
+    </SafeAreaView>
+  );
+}

example-bare/examples/index.tsx

@@ -3,3 +3,4 @@ export * from './Formats';
 export * from './CustomThemes';
 export * from './InitialLocation';
 export * from './Search';
+export * from './OpenExternalLink';

example-bare/package.json

@@ -9,7 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@epubjs-react-native/core": "^1.4.0-beta.1",
+    "@epubjs-react-native/core": "^1.4.0-staging.11",
     "@epubjs-react-native/file-system": "^1.1.2",
     "@react-navigation/native": "^6.1.15",
     "@react-navigation/native-stack": "^6.9.24",

example-bare/yarn.lock

@@ -1206,10 +1206,10 @@
   dependencies:
     "@types/hammerjs" "^2.0.36"
 
-"@epubjs-react-native/core@^1.4.0-beta.1":
-  version "1.4.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@epubjs-react-native/core/-/core-1.4.0-beta.1.tgz#c77a50729f64b7ac64fdcd8529b60e6ddfddb596"
-  integrity sha512-OyJsIlEkHYhHRsVMjFJO+HROdpZI8f3jxpWVDtJvBpJ7bJCG3jA2eFCBmD7WwVrub5FL/ignuOVNEz1MNx38cw==
+"@epubjs-react-native/core@^1.4.0-staging.11":
+  version "1.4.0-staging.11"
+  resolved "https://registry.yarnpkg.com/@epubjs-react-native/core/-/core-1.4.0-staging.11.tgz#2f263a1497f7208e2d08f2e337eb594c750efb0a"
+  integrity sha512-mlbF+cpNskV3K9qGjfxH+WVuTg9RqvLkqTLfscuBDX83xGegByhip+AXN6ZcEIPG4u9CQp39dyohEqxh+zQMTw==
 
 "@epubjs-react-native/file-system@^1.1.2":
   version "1.1.2"

example-expo/App.tsx

@@ -8,6 +8,7 @@ import {
   CustomThemes,
   InitialLocation,
   Search,
+  OpenExternalLink,
 } from './examples';
 
 const { Navigator, Screen } = createNativeStackNavigator();
@@ -59,6 +60,12 @@ export const examples = [
     route: 'Search',
     component: Search,
   },
+  {
+    title: 'Open External Link',
+    description: 'Handle opening external links in epub',
+    route: 'OpenExternalLink',
+    component: OpenExternalLink,
+  },
 ];
 
 function Examples() {

example-expo/examples/OpenExternalLink/index.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Linking, SafeAreaView, useWindowDimensions } from 'react-native';
+import { Reader, ReaderProvider } from '@epubjs-react-native/core';
+import { useFileSystem } from '@epubjs-react-native/expo-file-system';
+
+export function OpenExternalLink() {
+  const { width, height } = useWindowDimensions();
+
+  return (
+    <SafeAreaView>
+      <ReaderProvider>
+        <Reader
+          src="https://github.com/IDPF/epub3-samples/releases/download/20230704/accessible_epub_3.epub"
+          width={width}
+          height={height}
+          fileSystem={useFileSystem}
+          initialLocation="pr01s04.xhtml"
+          onPressExternalLink={(url) => {
+            Linking.openURL(url);
+          }}
+        />
+      </ReaderProvider>
+    </SafeAreaView>
+  );
+}

example-expo/examples/index.tsx

@@ -3,3 +3,4 @@ export * from './Formats';
 export * from './CustomThemes';
 export * from './InitialLocation';
 export * from './Search';
+export * from './OpenExternalLink';

example-expo/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@epubjs-react-native/core": "^1.4.0-beta.15",
+    "@epubjs-react-native/core": "^1.4.0-staging.11",
     "@epubjs-react-native/expo-file-system": "^1.1.2",
     "@react-navigation/native": "^6.1.15",
     "@react-navigation/native-stack": "^6.9.24",