@webority-technologies/mobile-ui 0.0.8 → 0.0.9

package/lib/commonjs/components/DocumentViewer/DocumentViewer.js

@@ -14,6 +14,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const HAS_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
 const MAX_RENDER_SCALE = 3;
+/** How many pages beyond the current one stay mounted, each direction. */
+const RENDER_WINDOW = 1;
 const toError = value => value instanceof Error ? value : new Error(String(value));
 
 /** The renderPage scale is capped so a very wide view never asks the native
@@ -38,11 +40,19 @@ const localPathFromSource = async source => {
   });
   return result.path;
 };
+
 /**
  * Renders a PDF via our own native rasterizer (PDFKit on iOS, PdfRenderer on
- * Android) — no third-party PDF dependency. The WebView fallback consumer
- * apps use for non-PDF office documents is a distinct rendering strategy and
- * stays app-side.
+ * Android) — no third-party PDF dependency. Pages are paged through a plain
+ * `ScrollView` with manual windowed mounting (render the visible page ±
+ * `RENDER_WINDOW`), not a `FlatList` — a `VirtualizedList`-based component
+ * would trip React Native's "VirtualizedLists should never be nested inside
+ * plain ScrollViews" the moment a consumer embeds DocumentViewer in their own
+ * scrolling screen, which is a completely ordinary way to use it. Avoiding the
+ * VirtualizedList primitive entirely removes that whole class of warning
+ * rather than working around one instance of it. The WebView fallback
+ * consumer apps use for non-PDF office documents is a distinct rendering
+ * strategy and stays app-side.
  */
 const DocumentViewer = ({
   source,
@@ -64,11 +74,14 @@ const DocumentViewer = ({
   }); // US Letter fallback
   const pageAspect = pageSizePt.height / pageSizePt.width;
   const [renderedPages, setRenderedPages] = (0, _react.useState)({});
+  const [currentPage, setCurrentPage] = (0, _react.useState)(0);
   const handleRef = (0, _react.useRef)(null);
   const onErrorRef = (0, _react.useRef)(onError);
   onErrorRef.current = onError;
   const onLoadCompleteRef = (0, _react.useRef)(onLoadComplete);
   onLoadCompleteRef.current = onLoadComplete;
+  const onPageChangedRef = (0, _react.useRef)(onPageChanged);
+  onPageChangedRef.current = onPageChanged;
   const documentSource = (0, _react.useMemo)(() => ({
     uri: source.uri,
     headers: source.headers,
@@ -93,6 +106,8 @@ const DocumentViewer = ({
         }
         handleRef.current = opened.handle;
         setPageCount(opened.pageCount);
+        setCurrentPage(0);
+        setRenderedPages({});
         if (opened.pageWidth > 0 && opened.pageHeight > 0) {
           setPageSizePt({
             width: opened.pageWidth,
@@ -135,56 +150,37 @@ const DocumentViewer = ({
       _mobileCore.Logger.error(`[@webority-technologies/mobile-ui] DocumentViewer failed to render page ${pageIndex}.`, toError(error));
     }
   }, [pageSizePt.width, windowWidth]);
-  const data = (0, _react.useMemo)(() => Array.from({
-    length: pageCount
-  }, (_unused, index) => ({
-    index
-  })), [pageCount]);
-  const onPageChangedRef = (0, _react.useRef)(onPageChanged);
-  onPageChangedRef.current = onPageChanged;
-  const pageCountRef = (0, _react.useRef)(pageCount);
-  pageCountRef.current = pageCount;
-  const renderPageImageRef = (0, _react.useRef)(renderPageImage);
-  renderPageImageRef.current = renderPageImage;
+  const pageHeight = windowWidth * pageAspect;
 
-  // A stable function identity: FlatList warns if onViewableItemsChanged changes
-  // identity across renders, so the current values it needs are read from refs
-  // kept up to date every render instead of being closed over here.
-  const onViewableItemsChanged = (0, _react.useRef)(({
-    viewableItems
-  }) => {
-    const first = viewableItems[0]?.item;
-    if (first) {
-      onPageChangedRef.current?.(first.index + 1, pageCountRef.current);
-      viewableItems.forEach(v => void renderPageImageRef.current(v.item.index));
+  // Mount and rasterize the current page plus a small window around it;
+  // everything else stays an empty placeholder slot until scrolled near.
+  (0, _react.useEffect)(() => {
+    if (pageCount === 0) {
+      return;
     }
-  });
-  const renderItem = (0, _react.useCallback)(({
-    item
-  }) => {
-    const uri = renderedPages[item.index];
-    const pageWidth = windowWidth;
-    const pageHeight = pageWidth * pageAspect;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.page, {
-        width: pageWidth,
-        height: pageHeight
-      }],
-      children: uri ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-        source: {
-          uri
-        },
-        style: styles.pageImage,
-        resizeMode: "contain",
-        accessible: false
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.pagePlaceholder,
-        children: loadingIndicator ? loadingIndicator() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Spinner, {
-          size: "lg"
-        })
-      })
+    const start = Math.max(0, currentPage - RENDER_WINDOW);
+    const end = Math.min(pageCount - 1, currentPage + RENDER_WINDOW);
+    for (let index = start; index <= end; index += 1) {
+      void renderPageImage(index);
+    }
+  }, [currentPage, pageCount, renderPageImage]);
+  const handleScroll = (0, _react.useCallback)(event => {
+    if (pageHeight <= 0) {
+      return;
+    }
+    const page = Math.min(pageCount - 1, Math.max(0, Math.round(event.nativeEvent.contentOffset.y / pageHeight)));
+    setCurrentPage(prev => {
+      if (prev !== page) {
+        onPageChangedRef.current?.(page + 1, pageCount);
+      }
+      return page;
     });
-  }, [loadingIndicator, pageAspect, renderedPages, windowWidth]);
+  }, [pageCount, pageHeight]);
+  const pages = (0, _react.useMemo)(() => Array.from({
+    length: pageCount
+  }, (_unused, i) => i), [pageCount]);
+  const renderWindowStart = Math.max(0, currentPage - RENDER_WINDOW);
+  const renderWindowEnd = Math.min(pageCount - 1, currentPage + RENDER_WINDOW);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [styles.root, style],
     testID: testID,
@@ -196,16 +192,34 @@ const DocumentViewer = ({
       children: loadingIndicator ? loadingIndicator() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Spinner, {
         size: "lg"
       })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-      data: data,
-      keyExtractor: item => String(item.index),
-      renderItem: renderItem,
-      onViewableItemsChanged: onViewableItemsChanged.current,
-      viewabilityConfig: {
-        itemVisiblePercentThreshold: 50
-      },
-      initialNumToRender: 2,
-      windowSize: 3
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      onScroll: handleScroll,
+      scrollEventThrottle: 32,
+      showsVerticalScrollIndicator: true,
+      removeClippedSubviews: true,
+      children: pages.map(index => {
+        const withinWindow = index >= renderWindowStart && index <= renderWindowEnd;
+        const uri = withinWindow ? renderedPages[index] : undefined;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.page, {
+            width: windowWidth,
+            height: pageHeight
+          }],
+          children: uri ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+            source: {
+              uri
+            },
+            style: styles.pageImage,
+            resizeMode: "contain",
+            accessible: false
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.pagePlaceholder,
+            children: withinWindow ? loadingIndicator?.() ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Spinner, {
+              size: "lg"
+            }) : null
+          })
+        }, index);
+      })
     })
   });
 };

package/lib/module/components/DocumentViewer/DocumentViewer.js

@@ -3,12 +3,14 @@
 import { Logger } from '@webority-technologies/mobile-core';
 import { downloadFile } from '@webority-technologies/mobile-core/download';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { FlatList, Image, PixelRatio, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { Image, PixelRatio, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
 import PdfRasterizer from "../../specs/NativePdfRasterizer.js";
 import { Spinner } from "../Spinner/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const HAS_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
 const MAX_RENDER_SCALE = 3;
+/** How many pages beyond the current one stay mounted, each direction. */
+const RENDER_WINDOW = 1;
 const toError = value => value instanceof Error ? value : new Error(String(value));
 
 /** The renderPage scale is capped so a very wide view never asks the native
@@ -33,11 +35,19 @@ const localPathFromSource = async source => {
   });
   return result.path;
 };
+
 /**
  * Renders a PDF via our own native rasterizer (PDFKit on iOS, PdfRenderer on
- * Android) — no third-party PDF dependency. The WebView fallback consumer
- * apps use for non-PDF office documents is a distinct rendering strategy and
- * stays app-side.
+ * Android) — no third-party PDF dependency. Pages are paged through a plain
+ * `ScrollView` with manual windowed mounting (render the visible page ±
+ * `RENDER_WINDOW`), not a `FlatList` — a `VirtualizedList`-based component
+ * would trip React Native's "VirtualizedLists should never be nested inside
+ * plain ScrollViews" the moment a consumer embeds DocumentViewer in their own
+ * scrolling screen, which is a completely ordinary way to use it. Avoiding the
+ * VirtualizedList primitive entirely removes that whole class of warning
+ * rather than working around one instance of it. The WebView fallback
+ * consumer apps use for non-PDF office documents is a distinct rendering
+ * strategy and stays app-side.
  */
 export const DocumentViewer = ({
   source,
@@ -59,11 +69,14 @@ export const DocumentViewer = ({
   }); // US Letter fallback
   const pageAspect = pageSizePt.height / pageSizePt.width;
   const [renderedPages, setRenderedPages] = useState({});
+  const [currentPage, setCurrentPage] = useState(0);
   const handleRef = useRef(null);
   const onErrorRef = useRef(onError);
   onErrorRef.current = onError;
   const onLoadCompleteRef = useRef(onLoadComplete);
   onLoadCompleteRef.current = onLoadComplete;
+  const onPageChangedRef = useRef(onPageChanged);
+  onPageChangedRef.current = onPageChanged;
   const documentSource = useMemo(() => ({
     uri: source.uri,
     headers: source.headers,
@@ -88,6 +101,8 @@ export const DocumentViewer = ({
         }
         handleRef.current = opened.handle;
         setPageCount(opened.pageCount);
+        setCurrentPage(0);
+        setRenderedPages({});
         if (opened.pageWidth > 0 && opened.pageHeight > 0) {
           setPageSizePt({
             width: opened.pageWidth,
@@ -130,56 +145,37 @@ export const DocumentViewer = ({
       Logger.error(`[@webority-technologies/mobile-ui] DocumentViewer failed to render page ${pageIndex}.`, toError(error));
     }
   }, [pageSizePt.width, windowWidth]);
-  const data = useMemo(() => Array.from({
-    length: pageCount
-  }, (_unused, index) => ({
-    index
-  })), [pageCount]);
-  const onPageChangedRef = useRef(onPageChanged);
-  onPageChangedRef.current = onPageChanged;
-  const pageCountRef = useRef(pageCount);
-  pageCountRef.current = pageCount;
-  const renderPageImageRef = useRef(renderPageImage);
-  renderPageImageRef.current = renderPageImage;
+  const pageHeight = windowWidth * pageAspect;
 
-  // A stable function identity: FlatList warns if onViewableItemsChanged changes
-  // identity across renders, so the current values it needs are read from refs
-  // kept up to date every render instead of being closed over here.
-  const onViewableItemsChanged = useRef(({
-    viewableItems
-  }) => {
-    const first = viewableItems[0]?.item;
-    if (first) {
-      onPageChangedRef.current?.(first.index + 1, pageCountRef.current);
-      viewableItems.forEach(v => void renderPageImageRef.current(v.item.index));
+  // Mount and rasterize the current page plus a small window around it;
+  // everything else stays an empty placeholder slot until scrolled near.
+  useEffect(() => {
+    if (pageCount === 0) {
+      return;
     }
-  });
-  const renderItem = useCallback(({
-    item
-  }) => {
-    const uri = renderedPages[item.index];
-    const pageWidth = windowWidth;
-    const pageHeight = pageWidth * pageAspect;
-    return /*#__PURE__*/_jsx(View, {
-      style: [styles.page, {
-        width: pageWidth,
-        height: pageHeight
-      }],
-      children: uri ? /*#__PURE__*/_jsx(Image, {
-        source: {
-          uri
-        },
-        style: styles.pageImage,
-        resizeMode: "contain",
-        accessible: false
-      }) : /*#__PURE__*/_jsx(View, {
-        style: styles.pagePlaceholder,
-        children: loadingIndicator ? loadingIndicator() : /*#__PURE__*/_jsx(Spinner, {
-          size: "lg"
-        })
-      })
+    const start = Math.max(0, currentPage - RENDER_WINDOW);
+    const end = Math.min(pageCount - 1, currentPage + RENDER_WINDOW);
+    for (let index = start; index <= end; index += 1) {
+      void renderPageImage(index);
+    }
+  }, [currentPage, pageCount, renderPageImage]);
+  const handleScroll = useCallback(event => {
+    if (pageHeight <= 0) {
+      return;
+    }
+    const page = Math.min(pageCount - 1, Math.max(0, Math.round(event.nativeEvent.contentOffset.y / pageHeight)));
+    setCurrentPage(prev => {
+      if (prev !== page) {
+        onPageChangedRef.current?.(page + 1, pageCount);
+      }
+      return page;
     });
-  }, [loadingIndicator, pageAspect, renderedPages, windowWidth]);
+  }, [pageCount, pageHeight]);
+  const pages = useMemo(() => Array.from({
+    length: pageCount
+  }, (_unused, i) => i), [pageCount]);
+  const renderWindowStart = Math.max(0, currentPage - RENDER_WINDOW);
+  const renderWindowEnd = Math.min(pageCount - 1, currentPage + RENDER_WINDOW);
   return /*#__PURE__*/_jsx(View, {
     style: [styles.root, style],
     testID: testID,
@@ -191,16 +187,34 @@ export const DocumentViewer = ({
       children: loadingIndicator ? loadingIndicator() : /*#__PURE__*/_jsx(Spinner, {
         size: "lg"
       })
-    }) : /*#__PURE__*/_jsx(FlatList, {
-      data: data,
-      keyExtractor: item => String(item.index),
-      renderItem: renderItem,
-      onViewableItemsChanged: onViewableItemsChanged.current,
-      viewabilityConfig: {
-        itemVisiblePercentThreshold: 50
-      },
-      initialNumToRender: 2,
-      windowSize: 3
+    }) : /*#__PURE__*/_jsx(ScrollView, {
+      onScroll: handleScroll,
+      scrollEventThrottle: 32,
+      showsVerticalScrollIndicator: true,
+      removeClippedSubviews: true,
+      children: pages.map(index => {
+        const withinWindow = index >= renderWindowStart && index <= renderWindowEnd;
+        const uri = withinWindow ? renderedPages[index] : undefined;
+        return /*#__PURE__*/_jsx(View, {
+          style: [styles.page, {
+            width: windowWidth,
+            height: pageHeight
+          }],
+          children: uri ? /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri
+            },
+            style: styles.pageImage,
+            resizeMode: "contain",
+            accessible: false
+          }) : /*#__PURE__*/_jsx(View, {
+            style: styles.pagePlaceholder,
+            children: withinWindow ? loadingIndicator?.() ?? /*#__PURE__*/_jsx(Spinner, {
+              size: "lg"
+            }) : null
+          })
+        }, index);
+      })
     })
   });
 };

package/lib/typescript/commonjs/components/DocumentViewer/DocumentViewer.d.ts

@@ -19,9 +19,16 @@ export interface DocumentViewerProps {
 }
 /**
  * Renders a PDF via our own native rasterizer (PDFKit on iOS, PdfRenderer on
- * Android) — no third-party PDF dependency. The WebView fallback consumer
- * apps use for non-PDF office documents is a distinct rendering strategy and
- * stays app-side.
+ * Android) — no third-party PDF dependency. Pages are paged through a plain
+ * `ScrollView` with manual windowed mounting (render the visible page ±
+ * `RENDER_WINDOW`), not a `FlatList` — a `VirtualizedList`-based component
+ * would trip React Native's "VirtualizedLists should never be nested inside
+ * plain ScrollViews" the moment a consumer embeds DocumentViewer in their own
+ * scrolling screen, which is a completely ordinary way to use it. Avoiding the
+ * VirtualizedList primitive entirely removes that whole class of warning
+ * rather than working around one instance of it. The WebView fallback
+ * consumer apps use for non-PDF office documents is a distinct rendering
+ * strategy and stays app-side.
  */
 export declare const DocumentViewer: React.FC<DocumentViewerProps>;
 export default DocumentViewer;

package/lib/typescript/module/components/DocumentViewer/DocumentViewer.d.ts

@@ -19,9 +19,16 @@ export interface DocumentViewerProps {
 }
 /**
  * Renders a PDF via our own native rasterizer (PDFKit on iOS, PdfRenderer on
- * Android) — no third-party PDF dependency. The WebView fallback consumer
- * apps use for non-PDF office documents is a distinct rendering strategy and
- * stays app-side.
+ * Android) — no third-party PDF dependency. Pages are paged through a plain
+ * `ScrollView` with manual windowed mounting (render the visible page ±
+ * `RENDER_WINDOW`), not a `FlatList` — a `VirtualizedList`-based component
+ * would trip React Native's "VirtualizedLists should never be nested inside
+ * plain ScrollViews" the moment a consumer embeds DocumentViewer in their own
+ * scrolling screen, which is a completely ordinary way to use it. Avoiding the
+ * VirtualizedList primitive entirely removes that whole class of warning
+ * rather than working around one instance of it. The WebView fallback
+ * consumer apps use for non-PDF office documents is a distinct rendering
+ * strategy and stays app-side.
  */
 export declare const DocumentViewer: React.FC<DocumentViewerProps>;
 export default DocumentViewer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile-ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",