From dcf55a8d39ad010c8bab57eea1f20e5c9df59d16 Mon Sep 17 00:00:00 2001
From: amauryliet <amaury.liet@hotmail.fr>
Date: Fri, 18 Jun 2021 11:56:23 +0200
Subject: [PATCH 1/3] fix: Allow zooming on full child content, even if it
 appeared truncated on first render

---
 README.md                       |  1 +
 src/ReactNativeZoomableView.tsx | 18 +++++++++++++++++-
 src/typings/index.d.ts          |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index cb6b930..ac1b522 100644
--- a/README.md
+++ b/README.md
@@ -143,6 +143,7 @@ These options can be used to limit and change the zoom behavior.
 | movementSensibility | number | how resistant should shifting the view around be? (0.5 - 5) - higher is less sensitive | 1.9 |
 | initialOffsetX | number | The horizontal offset the image should start at | 0 |
 | initialOffsetY | number | The vertical offset the image should start at | 0 |
+| contentAspectRatio | number | To provide if the children does not have the same aspect ratio as ReactNativeZoomableView | ReactNativeZoomableView onMount's aspect ratio |
 | longPressDuration | number | Duration in ms until a press is considered a long press | 700 |
 | captureEvent | boolean | Defines whether the pan responder of the parent element should be captured. (useful for react-native modals, set it to true) | false |
 
diff --git a/src/ReactNativeZoomableView.tsx b/src/ReactNativeZoomableView.tsx
index 989d909..b02ca50 100644
--- a/src/ReactNativeZoomableView.tsx
+++ b/src/ReactNativeZoomableView.tsx
@@ -267,12 +267,13 @@ class ReactNativeZoomableView extends Component<ReactNativeZoomableViewProps, Re
     containerSize: number,
     elementSize: number,
     zoomLevel: number,
+    startOffset: number,
   ) {
     const zoomLevelOffsetValue = zoomLevel * offsetValue;
 
     const containerToScaledElementRatioSub = 1 - containerSize / elementSize;
     const halfLengthPlusScaledHalf = 0.5 + 0.5 / zoomLevel;
-    const startBorder = containerSize * containerToScaledElementRatioSub * halfLengthPlusScaledHalf;
+    const startBorder = containerSize * containerToScaledElementRatioSub * halfLengthPlusScaledHalf + startOffset;
     const endBorder = (containerSize + startBorder - containerSize) * -1;
 
     // calculate distance to start and end borders
@@ -352,6 +353,19 @@ class ReactNativeZoomableView extends Component<ReactNativeZoomableViewProps, Re
     const currentElementWidth = originalWidth * changeObj.zoomLevel;
     const currentElementHeight = originalHeight * changeObj.zoomLevel;
 
+    // gentle reminder for the following logic:
+    //    RATIO = W / H
+    //    H = W / RATIO
+    //    W = H * RATIO
+
+    const aspectRatioOnMount = originalHeight && originalWidth ? originalWidth / originalHeight : 1;
+    const { contentAspectRatio = aspectRatioOnMount } = this.props;
+
+    const wasWidthCroppedOnMount = aspectRatioOnMount < contentAspectRatio;
+
+    const croppedWidthInPx = wasWidthCroppedOnMount ? originalHeight * contentAspectRatio - originalWidth : 0;
+    const croppedHeightInPx = wasWidthCroppedOnMount ? 0 : originalWidth / contentAspectRatio - originalHeight;
+
     // make sure that view doesn't go out of borders
     const offsetXBound = this._getBoundOffsetValue(
       'x',
@@ -359,6 +373,7 @@ class ReactNativeZoomableView extends Component<ReactNativeZoomableViewProps, Re
       originalWidth,
       currentElementWidth,
       changeObj.zoomLevel,
+      croppedWidthInPx / 2,
     );
     changeObj.offsetX = offsetXBound;
 
@@ -368,6 +383,7 @@ class ReactNativeZoomableView extends Component<ReactNativeZoomableViewProps, Re
       originalHeight,
       currentElementHeight,
       changeObj.zoomLevel,
+      croppedHeightInPx / 2,
     );
     changeObj.offsetY = offsetYBound;
 
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
index 724a732..bf0c220 100644
--- a/src/typings/index.d.ts
+++ b/src/typings/index.d.ts
@@ -31,6 +31,7 @@ declare module '@dudigital/react-native-zoomable-view' {
     initialZoom?: number;
     initialOffsetX?: number;
     initialOffsetY?: number;
+    contentAspectRatio?: number;
     maxZoom?: number;
     minZoom?: number;
     doubleTapDelay?: number;

From 26b5df7e2cc01feb00db1b014e39c2716d170da6 Mon Sep 17 00:00:00 2001
From: amauryliet <amaury.liet@hotmail.fr>
Date: Fri, 18 Jun 2021 16:47:02 +0200
Subject: [PATCH 2/3] refactor: Move prop acces to method top

---
 src/ReactNativeZoomableView.tsx | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/ReactNativeZoomableView.tsx b/src/ReactNativeZoomableView.tsx
index b02ca50..e30b04b 100644
--- a/src/ReactNativeZoomableView.tsx
+++ b/src/ReactNativeZoomableView.tsx
@@ -343,6 +343,8 @@ class ReactNativeZoomableView extends Component<ReactNativeZoomableViewProps, Re
    * @private
    */
   _bindOffsetValuesToBorders(changeObj, bindToBorders = null) {
+    const { contentAspectRatio } = this.props;
+
     // if bindToBorders is disabled -> nothing do here
     if (bindToBorders === false || (bindToBorders === null && !this.props.bindToBorders)) {
       return changeObj;
@@ -353,18 +355,27 @@ class ReactNativeZoomableView extends Component<ReactNativeZoomableViewProps, Re
     const currentElementWidth = originalWidth * changeObj.zoomLevel;
     const currentElementHeight = originalHeight * changeObj.zoomLevel;
 
-    // gentle reminder for the following logic:
-    //    RATIO = W / H
-    //    H = W / RATIO
-    //    W = H * RATIO
+    let croppedWidthInPx = 0;
+    let croppedHeightInPx = 0;
+
+    // if the content and container doesn't have the same aspect ratio,
+    // we must allow a pan movement toward the part of the content that was truncated originally
+    if (contentAspectRatio) {
+      // gentle reminder for the following logic:
+      //    RATIO = W / H
+      //    H = W / RATIO
+      //    W = H * RATIO
 
-    const aspectRatioOnMount = originalHeight && originalWidth ? originalWidth / originalHeight : 1;
-    const { contentAspectRatio = aspectRatioOnMount } = this.props;
+      const aspectRatioOnMount = originalHeight && originalWidth ? originalWidth / originalHeight : 1;
 
-    const wasWidthCroppedOnMount = aspectRatioOnMount < contentAspectRatio;
+      const wasWidthCroppedOnMount = aspectRatioOnMount < contentAspectRatio;
 
-    const croppedWidthInPx = wasWidthCroppedOnMount ? originalHeight * contentAspectRatio - originalWidth : 0;
-    const croppedHeightInPx = wasWidthCroppedOnMount ? 0 : originalWidth / contentAspectRatio - originalHeight;
+      if (wasWidthCroppedOnMount) {
+        croppedWidthInPx = originalHeight * contentAspectRatio - originalWidth;
+      } else {
+        croppedHeightInPx = originalWidth / contentAspectRatio - originalHeight;
+      }
+    }
 
     // make sure that view doesn't go out of borders
     const offsetXBound = this._getBoundOffsetValue(

From cb95ddd6d68d758fdc80054bfec23cd5c186e932 Mon Sep 17 00:00:00 2001
From: amauryliet <amaury.liet@hotmail.fr>
Date: Fri, 18 Jun 2021 16:47:39 +0200
Subject: [PATCH 3/3] style: Make formatting tool coherent with current style

---
 .prettierrc | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index e6a1cda..d86cb36 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
 {
     "printWidth": 120,
-    "endOfLine": "crlf",
+    "endOfLine": "lf",
     "quoteProps": "consistent",
     "singleQuote": true,
     "trailingComma": "all"
-}
\ No newline at end of file
+}