feat(zoom): accept insets for safe area support

Author: alpha0010

README.md

@@ -126,6 +126,8 @@ display mode.
 
 Props:
 - All props from `PdfView`
+- `insets: { top: number; right: number; bottom: number; left: number }`
+  - Optional: Content padding for safe area handling.
 - `onZoomIn: () => void`
   - Optional: Callback when view starts to zoom.
 - `onZoomReset: () => void`

src/ZoomPdfView.tsx

@@ -14,9 +14,16 @@ type ScrollViewInstance = Exclude<
 >;
 type ScrollViewRef = React.RefObject<ScrollViewInstance | null>;
 
+type EdgeInsets = { top: number; right: number; bottom: number; left: number };
+
 export type PdfComponent = (props: PdfViewProps) => JSX.Element;
 
 export type ZoomPdfViewProps = PdfViewProps & {
+  /**
+   * Content padding for safe area handling.
+   */
+  insets?: EdgeInsets;
+
   /**
    * Callback when view starts to zoom.
    */
@@ -104,6 +111,7 @@ function useSyncAnimatedXY() {
 function useZoomGesture(
   pdfSize: PageDim,
   viewSize: PageDim,
+  insets: EdgeInsets | undefined,
   resizeMode: ResizeMode | undefined,
   maxScale: number,
   hScrollRef: ScrollViewRef,
@@ -119,6 +127,17 @@ function useZoomGesture(
 
   const [isZoomed, setIsZoomed] = useState(false);
 
+  const innerViewSize = useMemo(
+    () =>
+      insets == null
+        ? viewSize
+        : {
+            width: viewSize.width - insets.left - insets.right,
+            height: viewSize.height - insets.top - insets.bottom,
+          },
+    [insets, viewSize]
+  );
+
   // Resolution to render.
   const containerScale = useRef({
     animated: new Animated.Value(1),
@@ -134,20 +153,20 @@ function useZoomGesture(
   useEffect(() => {
     const { viewWidth, viewHeight } = getViewDims(
       pdfSize,
-      viewSize,
+      innerViewSize,
       resizeMode
     );
     const width = Math.max(
-      (viewSize.width - containerScale.static * viewWidth) / 2,
+      (innerViewSize.width - containerScale.static * viewWidth) / 2,
       0
     );
     const height = Math.max(
-      viewSize.height - containerScale.static * viewHeight,
+      innerViewSize.height - containerScale.static * viewHeight,
       0
     );
 
     bufferSize.setValue({ x: width, y: height });
-  }, [bufferSize, containerScale, pdfSize, resizeMode, viewSize]);
+  }, [bufferSize, containerScale, innerViewSize, pdfSize, resizeMode]);
 
   // Origin point of pinch gesture.
   const focalPoint = useSyncAnimatedXY();
@@ -177,7 +196,10 @@ function useZoomGesture(
     return Gesture.Pinch()
       .runOnJS(true)
       .onStart((e) =>
-        focalPoint.animated.setValue({ x: e.focalX, y: e.focalY })
+        focalPoint.animated.setValue({
+          x: e.focalX - (insets?.left ?? 0),
+          y: e.focalY - (insets?.top ?? 0),
+        })
       )
       .onUpdate((e) => pinchScale.setValue(e.scale))
       .onEnd((e) => {
@@ -188,12 +210,12 @@ function useZoomGesture(
         const applyScale = async () => {
           const { viewWidth, viewHeight } = getViewDims(
             pdfSize,
-            viewSize,
+            innerViewSize,
             resizeMode
           );
           const prevScale = containerScale.static;
           const prevBufferX = Math.max(
-            (viewSize.width - prevScale * viewWidth) / 2,
+            (innerViewSize.width - prevScale * viewWidth) / 2,
             0
           );
 
@@ -203,8 +225,8 @@ function useZoomGesture(
           containerScale.static = targetScale;
           pinchScale.setValue(1);
           bufferSize.setValue({
-            x: Math.max((viewSize.width - targetScale * viewWidth) / 2, 0),
-            y: Math.max(viewSize.height - targetScale * viewHeight, 0),
+            x: Math.max((innerViewSize.width - targetScale * viewWidth) / 2, 0),
+            y: Math.max(innerViewSize.height - targetScale * viewHeight, 0),
           });
 
           // Send zoom events.
@@ -261,6 +283,8 @@ function useZoomGesture(
     contentOffset,
     focalPoint,
     hScrollRef,
+    innerViewSize,
+    insets,
     maxScale,
     onZoomIn,
     onZoomReset,
@@ -269,13 +293,12 @@ function useZoomGesture(
     resizeMode,
     setIsZoomed,
     vScrollRef,
-    viewSize,
   ]);
 
   const zoomStyle: AnimatedStyle = useMemo(() => {
     const { viewWidth, viewHeight } = getViewDims(
       pdfSize,
-      viewSize,
+      innerViewSize,
       resizeMode
     );
 
@@ -315,10 +338,10 @@ function useZoomGesture(
     contentOffset,
     containerScale,
     focalPoint,
+    innerViewSize,
     pdfSize,
     resizeMode,
     scale,
-    viewSize,
   ]);
 
   return {
@@ -335,6 +358,7 @@ function useZoomGesture(
  */
 export function ZoomPdfView(props: ZoomPdfViewProps) {
   const {
+    insets,
     maximumZoom,
     onLoadComplete,
     onZoomIn,
@@ -357,6 +381,7 @@ export function ZoomPdfView(props: ZoomPdfViewProps) {
     useZoomGesture(
       pdfSize,
       viewSize,
+      insets,
       resizeMode,
       maximumZoom ?? 2,
       hScrollRef,
@@ -436,6 +461,12 @@ export function ZoomPdfView(props: ZoomPdfViewProps) {
           >
             <GestureDetector gesture={vScrollGesture}>
               <Animated.ScrollView
+                contentContainerStyle={{
+                  paddingTop: insets?.top,
+                  paddingBottom: insets?.bottom,
+                  paddingLeft: insets?.left,
+                  paddingRight: insets?.right,
+                }}
                 onScroll={Animated.event(
                   [
                     {