Merge pull request #60 from Glazzes/dev

Fix typos and update SnapbackZoom child rules

docs/docs/components/cropzoom.md

@@ -115,9 +115,9 @@ Minimum scale value allowed by the pinch gesture, expects values greater than or
 | -------- | ----------- | -------- |
 | `number` | `undefined` | `No`     |
 
-Maximum scale value allowed by the pinch gesture, leaving this property as `undefined` will instruct the component
-to infer the maximum scale value based on `cropSize` and `resolution` properties in a such way `maxScale` is
-a value just before images and videos start getting pixelated.
+Maximum scale value allowed by the pinch gesture, if the value is `undefined` maxScale value will be infered
+based on `cropSize` and `resolution` properties in a such way maxScale is a value just before your content
+starts to pixelate.
 
 ### panMode
 

docs/docs/components/gallery.md

@@ -189,9 +189,12 @@ Modifies the orientation of the component to vertical mode.
 
 Maximum scale value allowed by the pinch gesture for all elements, expects values bigger than or equals one.
 
-Alternatively you can pass an array with the resolution of your images/videos, for instance `[{ width: 1920, height: 1080 }]`; this will instruct the component to calculate `maxScale` in such a way it's a value just before images and videos start getting pixelated for each element, the resolutions array must be as big as the `data` property array.
+You can also pass an array as big as the `data` property array containing the resolution of your images/videos,
+for instance `[{width: 1920, height: 1080}, {width: 1000, height: 1000}]`; maxScale is infered in such a way
+it's a value just before your content starts to pixelate.
 
 ### zoomEnabled
+
 | Type      | Default |
 | --------- | ------- |
 | `boolean` | `true`  |
@@ -242,7 +245,7 @@ Lets the user drag the current item around as they pinch, it also provides a mor
 
 | Type                | Default   |
 | ------------------- | --------- |
-| `'clamp' \| 'free'` | `'clamp'` |
+| `'clamp' \| 'sync'` | `'clamp'` |
 
 ::: tip Tip
 This property is meant to be used when `allowPinchPanning` property is set to `true`.
@@ -253,7 +256,7 @@ possible values are:
 
 - `clamp` keeps the pinch gesture clamped to the borders or its enclosing container during the entirity of the
   gesture, just like seen on Android galleries.
-- `free` keeps the pinch gesture in sync with user interaction, if the pinch gesture was released in an out bonds
+- `sync` keeps the pinch gesture in sync with user interaction, if the pinch gesture was released in an out bonds
   position it will animate back to a position within the bondaries of its enclosing container.
 
 ### onIndexChange
@@ -290,15 +293,10 @@ This property is useful for instance to animate the background color based on th
 
 ### onSwipe
 
-| Type                                  | Default     |
-| ------------------------------------- | ----------- |
+| Type                                                       | Default     |
+| ---------------------------------------------------------- | ----------- |
 | `(direction: 'up' \| 'down' \| 'left' \| 'right') => void` | `undefined` |
 
-::: tip Trigger Conditions
-
-- Edges of the current item must be in contact with the edges of `Gallery` component.
-  :::
-
 Callback triggered when the user swipes up, down, left or right.
 
 ### onScroll

docs/docs/components/resumablezoom.md

@@ -26,7 +26,7 @@ Its usage is pretty straight forward, just wrap a component of your choice with
 
 ::: tip Remember
 
-- This component uses `flex: 1` therefore it will attempt to take all available space.
+- This component uses `flex: 1` style therefore it will attempt to take all available space.
 - This component is best utilized when at least one of the two dimensions of the wrapped component is bigger than equals the space it's occupying in the screen, for instance if it's a full screen image detail screen, your image should be as wide or as tall as the size of your screen.
   :::
 
@@ -81,7 +81,7 @@ All properties for this component are optional.
 
 By default the gesture detection area is the same size as the width and height of the wrapped component,
 by setting this property to `true` the detection area is increased to the size `ResumableZoom` is taking
-on screen, see [this picture](../assets/extendgestures.jpg) for a visual reference.
+on screen, see [this picture](/extendgestures.jpg) for a visual reference.
 
 ### minScale
 
@@ -99,7 +99,9 @@ Minimum scale value allowed by the pinch gesture, expects values greater than or
 
 Maximum scale value allowed by the pinch gesture, expects values bigger than or equals one.
 
-Alternatively you can pass the resolution of your image/video, for instance `{ width: 1920, height: 1080 }`; this will instruct the component to calculate `maxScale` in such a way it's a value just before images and videos start getting pixelated.
+Alternatively you can pass the resolution of your image/video, for instance `{ width: 1920, height: 1080 }`;
+this will instruct the component to calculate `maxScale` in such a way it's a value just before your content
+starts to pixelate.
 
 ### panMode
 
@@ -112,8 +114,8 @@ enclosing it, possible values are:
 
 - `clamp` prevents the user from dragging the component out of its enclosing container boundaries.
 - `free` lets the user drag the component around freely, if the pan gesture ends in an out of bounds position
-  it will animate back to a position with the boundaries of its enclosing container.
-- `friction` is the same as `free`mode, however it just adds some amount of friction as you pan.
+  it will animate back to a position within the boundaries of its enclosing container.
+- `friction` is the same as `free`mode, however it adds some amount of friction as you pan.
 
 ### scaleMode
 
@@ -149,8 +151,8 @@ to user interaction. Panning as you pinch will not trigger any pan gesture relat
 | ------------------- | --------- |
 | `'clamp' \| 'sync'` | `'clamp'` |
 
-::: tip Tip
-This property is meant to be used when `allowPinchPanning` property is set to `true`.
+::: tip Requirements
+Requires `allowPinchPanning` property is set to `true`.
 :::
 
 Determine the behavior used by the pinch gesture relative to the boundaries of its enclosing component,
@@ -207,11 +209,9 @@ Callback triggered when the user taps the wrapped component once.
 | ---------------------------------------------------------- | ----------- |
 | `(direction: 'up' \| 'down' \| 'left' \| 'right') => void` | `undefined` |
 
-::: tip Trigger Conditions
-
-- `panMode` must be set to `'clamp'` (default value).
-- Edges of the wrapped component must be in contact with the edges of `ResumableZoom`.
-  :::
+::: tip Requirements
+Requires `panMode` property is set to `'clamp'`.
+:::
 
 Callback triggered when the user swipes up, down, left or right.
 

docs/docs/components/snapbackzoom.md

@@ -14,7 +14,7 @@ This component will be subject to some level of stuttering, unless you install a
 For more information see this [Gesture Handler's issue](https://github.com/software-mansion/react-native-gesture-handler/issues/2833) and [this issue](https://github.com/Glazzes/react-native-zoom-toolkit/issues/10).
 :::
 
-The next video footage is taken from the [Example app](https://github.com/Glazzes/react-native-zoom-toolkit/tree/main/example)
+The next video footage represents a complex use case, this one is taken from the [Example app](https://github.com/Glazzes/react-native-zoom-toolkit/tree/main/example)
 
 <div style="width: 100%; display: flex; justify-content: center; align-items: center">
   <video src="../assets/snapbackzoom.mp4" controls />
@@ -24,9 +24,12 @@ The next video footage is taken from the [Example app](https://github.com/Glazze
 
 Its usage is pretty straight forward, just wrap a component of your choice with it.
 
-::: tip Remember
-Do not use `position: "absolute"` style in the wrapped component by `SnapbackZoom` as it messes up with
-pinch gesture's measurement.
+::: tip Child Componenet Guidelines
+SnapbackZoom's child component must be measurable, therefore avoid the following:
+
+- Do not use relative size units like `{width: '100%'}`, use absolute values instead, for instance
+  `{width: 200, height: 200}`.
+- Do not use `{position: 'absolute'}` style, wrap SnapbackZoom in an absolute positioned view if you need to.
 :::
 
 ```jsx
@@ -176,8 +179,8 @@ const resizeConfig = {
 ```
 
 ::: tip Important
-SnapbackZoom resizes its own dimensions not your component's ones, therefore your component must have the
-following styles `{width: '100%', height: '100%'}`.
+Contrary to the child components guidelines mentioned at the start of this page when using `resizeConfig` property
+your component must have the following styles `{width: '100%', height: '100%'}`.
 :::
 
 At a scale of one your image is a tile of 200x200 pixel size, in other words a square, but at a scale two it resizes to 340x200 pixel size becoming a rectangle matching with the image's aspect ratio.

docs/docs/index.md

@@ -17,15 +17,15 @@ hero:
 
 features:
   - title: SnapbackZoom
-    details: An ideal component for "pinch to zoom" preview handling.
+    details: An ideal component for zoomable preview handling.
     link: /components/snapbackzoom
 
   - title: ResumableZoom
-    details: Pick up where you left! A handy component for detail and gallery screens.
+    details: Pick up where you left! A handy component for detail screens.
     link: /components/resumablezoom
 
   - title: CropZoom
-    details: An ideal and unopinionated component for image and video cropping needs.
+    details: An unopinionated component for image and video cropping needs.
     link: /components/cropzoom
 
   - title: Gallery