react-native-readium 2.0.0-rc.1 → 2.0.0

package/lib/src/components/ReadiumView.js

@@ -1,9 +1,10 @@
-import React, { useCallback, useState, useEffect, forwardRef } from 'react';
+import React, { useCallback, useState, useEffect, forwardRef, useRef } from 'react';
 import { View, Platform, findNodeHandle, StyleSheet } from 'react-native';
 import { Settings } from '../interfaces';
 import { createFragment, getWidthOrHeightValue as dimension } from '../utils';
 import { BaseReadiumView } from './BaseReadiumView';
-export const ReadiumView = forwardRef(({ onLocationChange: wrappedOnLocationChange, onTableOfContents: wrappedOnTableOfContents, settings: unmappedSettings, ...props }, ref) => {
+export const ReadiumView = forwardRef(({ onLocationChange: wrappedOnLocationChange, onTableOfContents: wrappedOnTableOfContents, settings: unmappedSettings, ...props }, forwardedRef) => {
+    const defaultRef = useRef(null);
     const [{ height, width }, setDimensions] = useState({
         width: 0,
         height: 0,
@@ -27,15 +28,24 @@ export const ReadiumView = forwardRef(({ onLocationChange: wrappedOnLocationChan
             wrappedOnTableOfContents(toc);
         }
     }, [wrappedOnTableOfContents]);
+    // create the view fragment on android
     useEffect(() => {
-        if (Platform.OS === 'android') {
-            // @ts-ignore 
-            const viewId = findNodeHandle(ref.current);
+        if (Platform.OS === 'android' && defaultRef.current) {
+            const viewId = findNodeHandle(defaultRef.current);
             createFragment(viewId);
         }
     }, []);
+    // assign the forwarded ref
+    useEffect(() => {
+        if (forwardedRef && 'current' in forwardedRef) {
+            forwardedRef.current = defaultRef.current;
+        }
+        else if (forwardedRef) {
+            forwardedRef(defaultRef);
+        }
+    }, [defaultRef.current !== null]);
     return (<View style={styles.container} onLayout={onLayout}>
-      <BaseReadiumView height={height} width={width} {...props} onLocationChange={onLocationChange} onTableOfContents={onTableOfContents} settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined} ref={ref}/>
+      <BaseReadiumView height={height} width={width} {...props} onLocationChange={onLocationChange} onTableOfContents={onTableOfContents} settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined} ref={defaultRef}/>
     </View>);
 });
 const styles = StyleSheet.create({

package/lib/web/hooks/useReaderRef.js

@@ -23,7 +23,7 @@ export const useReaderRef = ({ file, onLocationChange, onTableOfContents, }) =>
             readerRef.current = ref;
         }
         run();
-    }, []);
+    }, [file.url]);
     return readerRef;
 };
 // NOTE: right now we're serving these through statically.io, which is just

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-readium",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0",
   "description": "A react-native wrapper for https://readium.org/",
   "main": "lib/src/index",
   "types": "lib/src/index.d.ts",

package/src/components/ReadiumView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useEffect, forwardRef } from 'react';
+import React, { useCallback, useState, useEffect, forwardRef, ForwardedRef, useRef, createRef } from 'react';
 import { View, Platform, findNodeHandle, StyleSheet } from 'react-native';
 
 import type { BaseReadiumViewProps, Dimensions } from '../interfaces';
@@ -13,11 +13,13 @@ export const ReadiumView: React.FC<ReadiumProps> = forwardRef(({
   onTableOfContents: wrappedOnTableOfContents,
   settings: unmappedSettings,
   ...props
-}, ref) => {
+}, forwardedRef) => {
+  const defaultRef = useRef<any>(null);
   const [{ height, width }, setDimensions] = useState<Dimensions>({
     width: 0,
     height: 0,
   });
+
   // set the view dimensions on layout
   const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}: any) => {
     setDimensions({
@@ -25,6 +27,7 @@ export const ReadiumView: React.FC<ReadiumProps> = forwardRef(({
       height: dimension(height),
     });
   }, []);
+
   // wrap the native onLocationChange and extract the raw event value
   const onLocationChange = useCallback((event: any) => {
     if (wrappedOnLocationChange) {
@@ -39,13 +42,22 @@ export const ReadiumView: React.FC<ReadiumProps> = forwardRef(({
     }
   }, [wrappedOnTableOfContents]);
 
+  // create the view fragment on android
   useEffect(() => {
-    if (Platform.OS === 'android') {
-      // @ts-ignore 
-      const viewId = findNodeHandle(ref.current);
+    if (Platform.OS === 'android' && defaultRef.current) {
+      const viewId = findNodeHandle(defaultRef.current);
       createFragment(viewId);
     }
-  }, [])
+  }, []);
+
+  // assign the forwarded ref
+  useEffect(() => {
+    if (forwardedRef && 'current' in forwardedRef) {
+      forwardedRef.current = defaultRef.current;
+    } else if (forwardedRef) {
+      forwardedRef(defaultRef);
+    }
+  }, [defaultRef.current !== null])
 
   return (
     <View
@@ -59,7 +71,7 @@ export const ReadiumView: React.FC<ReadiumProps> = forwardRef(({
         onLocationChange={onLocationChange}
         onTableOfContents={onTableOfContents}
         settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}
-        ref={ref}
+        ref={defaultRef}
       />
     </View>
   );

package/web/hooks/useReaderRef.ts

@@ -32,7 +32,7 @@ export const useReaderRef = ({
       readerRef.current = ref;
     }
     run();
-  }, []);
+  }, [file.url]);
 
   return readerRef
 };