Merge pull request #124 from Glazzes/dev

Release 6.0.0

Author: Glazzes

.gitignore

@@ -40,9 +40,9 @@ project.xcworkspace
 local.properties
 android.iml
 
-# Cocoapods
-#
-example/ios/Pods
+# Native files
+example/ios/
+example/android/
 
 # Ruby
 example/vendor/

.nvmrc

@@ -1 +1 @@
-v18
+v24

babel.config.js

@@ -1,7 +1,4 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
-  plugins: [
-    '@babel/plugin-proposal-export-namespace-from',
-    'react-native-reanimated/plugin',
-  ],
+  plugins: ['react-native-worklets/plugin'],
 };

docs/docs/.vitepress/config.mts

@@ -14,7 +14,7 @@ export default defineConfig({
     nav: [
       { text: 'Home', link: '/' },
       {
-        text: '5.0.0',
+        text: '5.1.0',
         items: [
           {
             text: 'Releases',
@@ -52,6 +52,10 @@ export default defineConfig({
             text: 'useTransformationState',
             link: '/utilities/usetransformationstate',
           },
+          {
+            text: 'useZoomCallbacks',
+            link: '/utilities/useZoomCallbacks',
+          },
         ],
       },
       {

docs/docs/components/gallery.md

@@ -176,21 +176,36 @@ Blank space between items.
 | -------- | ------- |
 | `number` | `0`     |
 
-Sets the initial position of the list.
+Set the initial position of the list.
+
+### rtl
+| Type      | Default |
+| --------- | ------- |
+| `boolean` | `false` |
+
+Enable support for right to left layouts on horizontal mode, [more info](https://github.com/Glazzes/react-native-zoom-toolkit/issues/99#issuecomment-3029442065).
 
 ### vertical
 
 | Type      | Default |
 | --------- | ------- |
 | `boolean` | `false` |
 
-Modifies the orientation of the component to vertical mode.
+Modify the orientation of the component to vertical mode.
+
+### snapTimingConfig
+
+| Type     | Default     | Adittional Info |
+| -------- | ------------| --------------- |
+| `object` | `{duration: 300, easing: Easing.out(Easing.cubic)}` | see [timingConfig](https://docs.swmansion.com/react-native-reanimated/docs/animations/withTiming/#config-) |
+
+Set the timing config used to snap between gallery's elements.
 
 ### maxScale
 
 | Type                             | Default |
 | -------------------------------- | ------- |
-| `SizeVector<number>[] \| number` | `6`     |
+| `Size<number>[] \| number`       | `6`     |
 
 Maximum scale value allowed by the pinch gesture for all elements, expects values bigger than or equals one.
 
@@ -288,6 +303,22 @@ Callback triggered when the list scrolls to the next or previous item.
 
 Callback triggered when the user taps the current item once, provides additional metadata like index if you need it.
 
+### onDoubleTapStart
+
+| Type                           | Default     | Additional Info                                                                                                            |
+| ------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `(e: TapGestureEvent) => void` | `undefined` | see [tap gesture event data](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#event-data) |
+
+Callback triggered when the user double taps.
+
+### onDoubleTapEnd
+
+| Type                           | Default     | Additional Info                                                                                                            |
+| ------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `(e: TapGestureEvent) => void` | `undefined` | see [tap gesture event data](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#event-data) |
+
+Callback triggered when the scale animation ends after a double tap.
+
 ### onVerticalPull
 
 | Type                                              | Default     | Additional Info                                                                                    |
@@ -498,4 +529,4 @@ Reset all transformations to their initial state.
 | `direction`   | `vertical \| horizontal` | Direction of the gallery.                             |
 | `isScrolling` | `boolean`                | Whether the gallery is actively being scrolled.       |
 | `scroll`      | `number`                 | Current scroll value.                                 |
-| `gallerySize` | `SizeVector<number>`     | Width and height of the gallery.                      |
+| `gallerySize` | `Size<number>`           | Width and height of the gallery.                      |

docs/docs/components/resumablezoom.md

@@ -98,13 +98,13 @@ Minimum scale value allowed by the pinch gesture, expects values greater than or
 
 | Type                           | Default |
 | ------------------------------ | ------- |
-| `SizeVector<number> \| number` | `6`     |
+| `Size<number> \| number`       | `6`     |
 
 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 your content
-starts to pixelate.
+starts pixelating.
 
 ### panMode
 
@@ -200,6 +200,22 @@ Enables and disables both single and double tap gestures.
 
 Callback triggered when the user taps the wrapped component once.
 
+### onDoubleTapStart
+
+| Type                           | Default     | Additional Info                                                                                                            |
+| ------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `(e: TapGestureEvent) => void` | `undefined` | see [tap gesture event data](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#event-data) |
+
+Callback triggered when the user double taps.
+
+### onDoubleTapEnd
+
+| Type                           | Default     | Additional Info                                                                                                            |
+| ------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `(e: TapGestureEvent) => void` | `undefined` | see [tap gesture event data](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#event-data) |
+
+Callback triggered when the scale animation ends after a double tap.
+
 ### onSwipe
 
 | Type                                                       | Default     |

docs/docs/components/snapbackzoom.md

@@ -82,6 +82,26 @@ All properties for this component are optional.
 
 Increase (Android only) or decrease the gesture detection area around your component in all directions by a given amount in pixels, useful when dealing with small components.
 
+### minScale
+
+| Type     | Default |
+| -------- | ------- |
+| `number` | `0`     |
+
+Minimum scale value allowed by the pinch gesture, expects values greater than or equals one.
+
+### maxScale
+
+| Type                           | Default |
+| ------------------------------ | ------- |
+| `Size<number> \| number` | `6`     |
+
+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 your content
+starts pixelating.
+
 ### timingConfig
 
 | Type     | Default     | Additional Info                                                                                            |

docs/docs/installation.md

@@ -9,8 +9,29 @@ This library relies on both Reanimated and Gesture Handler making part of your p
 
 | React Native Version | React Native Zoom Toolkit Version | Gesture Handler version |
 | -------------------- | --------------------------------- | ----------------------- |
-| `<= 0.76`            | `>= 3.0.0`                        | 2.16.0 and beyond.      |
-| `>= 0.76`            | `>= 4.0.0`                        | 2.19.0 and beyond.      |
+| `<= 0.76`            | `>= 3.0.0`                        | 2.16.0 and above.       |
+| `>= 0.76`            | `>= 4.0.0`                        | 2.19.0 and above.       |
+| `>= 0.81`            | `>= 6.0.0`                        | 2.19.0 and above.       |
+
+For Expo 54 and above.
+
+::: code-group
+
+```sh [npm]
+npm install react-native-zoom-toolkit react-native-gesture-handler react-native-reanimated react-native-worklets
+```
+
+```sh [yarn]
+yarn add react-native-zoom-toolkit react-native-gesture-handler react-native-reanimated react-native-worklets
+```
+
+```sh [expo]
+npx expo install react-native-zoom-toolkit react-native-gesture-handler react-native-reanimated react-native-worklets
+```
+
+:::
+
+For Expo 53 and below.
 
 ::: code-group
 

docs/docs/utilities/useZoomCallbacks.md

@@ -0,0 +1,36 @@
+---
+title: useZoomCallbacks hook
+outline: deep
+---
+
+# useZoomCallbacks hook
+
+A simple utility for `ResumableZoom`, `CropZoom` and `Gallery` components to handle common zoom events such as
+
+| Event Name        | Description                                                                        |
+|-------------------|------------------------------------------------------------------------------------|
+| onUpdate          | Callback triggered every time scale is updated                                     |
+| onStart           | Callback triggered the very fist time scale value changes                          |
+| onEnd             | Callback triggered once the scale value has returned to its base state             |
+| onMaxScaleReached | Callback triggered once the scale value is greater than equals the max scale value |
+
+## How to use
+
+useZoomCallbacks is dependant on the zoom component's current state, therefore you need to use useTransformState hook in order to get such values.
+
+```tsx {3}
+const {state, onUpdate} = useTransformationState("common")
+useZoomCallbacks(
+  state,
+  {
+    onUpdate: (scale) => console.log("Current scale value ", scale),
+    onStart: () => console.log("Zoom started"),
+    onEnd: () => console.log("Zoom finished"),
+    onMaxScaleReached: (scale) => console.log("Reached max scale at", scale)
+  }
+)
+
+<ResumableZoom onUpdate={onUpdate}>
+  <Image />
+</ResumableZoom>
+```

docs/docs/utilities/usetransformationstate.md

@@ -12,11 +12,10 @@ your choice, for a hands on example see [How to use with Skia Components](../gui
 
 When calling this hook you will receive the three following properties:
 
-- `onUpdate` is a worklet function which must be passed as a property to the zoom component's onUpdate
+- `onUpdate` is a [worklet](https://docs.swmansion.com/react-native-reanimated/docs/guides/worklets/) which must be passed as a property to the zoom component's onUpdate
   callback property, this way the zoom component will update transform and state properties.
 - `transform` is a shared value describing zoom component's current transformations as an array.
-- `state` is an object holding the shared values describing the current transformation state, in case
-  you need them.
+- `state` is an object holding the [Reanimated's shared values](https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/shared-values/) describing the current transformation state in case you need them.
 
 ```tsx{9,21}
 import { useTransformationState } from 'react-native-zoom-toolkit';