[Gallery] feat: Added onZoomBegin and onZoomEnd callbacks for gallery

docs/docs/components/gallery.md

@@ -249,6 +249,13 @@ This property is useful for instance to animate the background color based on th
 
 Callback triggered when the user swipes up, down, left or right.
 
+### onScroll
+| Type | Default | Additional Info |
+|------|---------|----------------|
+| `(scroll: number, contentOffset: number) => void` | `undefined` | see [worklets](https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/worklets/) |
+
+Worklet callback triggered as the user scrolls the gallery.
+
 ### onPanStart
 | Type | Default | Additional Info |
 |------|---------|-----------------|
@@ -277,12 +284,19 @@ Callback triggered when the pinch gesture starts.
 
 Callback triggered as soon as the user lifts their fingers off the screen after pinching.
 
-### onScroll
-| Type | Default | Additional Info |
-|------|---------|----------------|
-| `(scroll: number, contentOffset: number) => void` | `undefined` | see [worklets](https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/worklets/) |
+### onZoomBegin
+| Type | Default |
+|------|---------|
+| `(index: number) => void` | `undefined` |
 
-Worklet callback triggered as the user scrolls the gallery.
+Callback triggered when component is zoomed from its base state (scale value at one).
+
+### onZoomEnd
+| Type | Default |
+|------|---------|
+| `(index: number) => void` | `undefined` |
+
+Callback triggered when component returns back to its original state (scale value at one).
 
 ### customTransition
 

src/commons/types.ts

@@ -116,3 +116,8 @@ export type TapGestureCallbacks = Partial<{
   onTap: TapGestureEventCallback;
   onDoubleTap: TapGestureEventCallback;
 }>;
+
+export type ZoomEventCallbacks = Partial<{
+  onZoomBegin: (index: number) => void;
+  onZoomEnd: (index: number) => void;
+}>;

src/components/gallery/Gallery.tsx

@@ -47,6 +47,8 @@ const Gallery = <T extends unknown>(props: GalleryPropsWithRef<T>) => {
     onPinchStart,
     onPinchEnd,
     onSwipe,
+    onZoomBegin,
+    onZoomEnd,
     onVerticalPull,
   } = props;
 
@@ -62,6 +64,7 @@ const Gallery = <T extends unknown>(props: GalleryPropsWithRef<T>) => {
     scroll,
     translate,
     scale,
+    hasZoomed,
   } = useContext(GalleryContext);
 
   const scrollDirection = useDerivedValue(() => {
@@ -118,6 +121,20 @@ const Gallery = <T extends unknown>(props: GalleryPropsWithRef<T>) => {
     [vertical, activeIndex, rootSize]
   );
 
+  useAnimatedReaction(
+    () => scale.value,
+    (value, previousValue) => {
+      if (value !== 1 && !hasZoomed.value) {
+        hasZoomed.value = true;
+        onZoomBegin && runOnJS(onZoomBegin)(activeIndex.value);
+      } else if (value === 1 && previousValue !== 1 && hasZoomed.value) {
+        hasZoomed.value = false;
+        onZoomEnd && runOnJS(onZoomEnd)(activeIndex.value);
+      }
+    },
+    [scale]
+  );
+
   // Reference handling
   const setIndex = (index: number) => {
     const clamped = clamp(index, 0, data.length);

src/components/gallery/GalleryProvider.tsx

@@ -34,6 +34,8 @@ const GalleryProvider = <T extends unknown>(
   const resetIndex = useSharedValue<number>(startIndex);
   const fetchIndex = useSharedValue<number>(startIndex);
 
+  const hasZoomed = useSharedValue<boolean>(false);
+
   const context: GalleryContextType = {
     rootSize,
     rootChildSize,
@@ -45,6 +47,7 @@ const GalleryProvider = <T extends unknown>(
     fetchIndex,
     isScrolling,
     scale,
+    hasZoomed,
   };
 
   return (

src/components/gallery/context.ts

@@ -13,6 +13,7 @@ export type GalleryContextType = {
   resetIndex: SharedValue<number>;
   fetchIndex: SharedValue<number>;
   isScrolling: SharedValue<boolean>;
+  hasZoomed: SharedValue<boolean>;
 };
 
 export const GalleryContext = React.createContext<GalleryContextType>(

src/components/gallery/types.ts

@@ -5,6 +5,7 @@ import type {
   SizeVector,
   SwipeDirection,
   TapGestureEvent,
+  ZoomEventCallbacks,
 } from '../../commons/types';
 import type { ResumableZoomState } from '../resumable/types';
 
@@ -44,7 +45,8 @@ export type GalleryProps<T = unknown> = {
   onScroll?: (scroll: number, contentOffset: number) => void;
   onVerticalPull?: (translateY: number, released: boolean) => void;
 } & PinchGestureCallbacks &
-  PanGestureCallbacks;
+  PanGestureCallbacks &
+  ZoomEventCallbacks;
 
 export type GalleryType = {
   setIndex: (index: number) => void;