Gallery : Change the snap transition duration and easing with props

docs/docs/components/gallery.md

@@ -272,6 +272,14 @@ possible values are:
 - `free` lets the user drag the component out of the container boundaries while pinching, 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.
 
+### snapTransitionConfig
+
+| Type                                     | Default                                     |
+| ---------------------------------------- | ------------------------------------------- |
+| `{ duration: number, easing: function }` | `{ duration: 300, easing: Easing.linear };` |
+
+Sets the duration and the type of transition to apply when an image snaps to the side of the screen.
+
 ### onIndexChange
 
 | Type                      | Default     |
@@ -354,16 +362,16 @@ Callback triggered as soon as the user lifts their fingers off the screen after
 
 ### longPressDuration
 
-| Type      | Default |
-| --------- | ------- |
-| `number`  | `500`   |
+| Type     | Default |
+| -------- | ------- |
+| `number` | `500`   |
 
 Minimum time expressed in milliseconds required to trigger the long press gesture event, expect values greater than 250 to avoid collisions with tap and double tap gestures.
 
 ### onLongPress
 
-| Type                                      | Default     | Additional Info                                                                                    |
-| ----------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------- |
+| Type                                         | Default     | Additional Info                                                                                                                           |
+| -------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | `(e: LongPressEvent, index: number) => void` | `undefined` | see [long press gesture event data](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/long-press-gesture/#event-data) |
 
 Callback triggered as soon as the long press gesture starts.
@@ -480,7 +488,7 @@ Reset all transformations to their initial state.
 ### CommonZoomState
 
 | Property        | Type           | Description                                        |
-|-----------------|----------------|----------------------------------------------------|
+| --------------- | -------------- | -------------------------------------------------- |
 | `containerSize` | `Size<number>` | Width and height of the Gallery component.         |
 | `childSize`     | `Size<number>` | Width and height of the current list element.      |
 | `maxScale`      | `number`       | Maximum scale allowed by the current list element. |

src/commons/types.ts

@@ -5,6 +5,11 @@ import type {
   PanGestureHandlerEventPayload,
   LongPressGestureHandlerEventPayload,
 } from 'react-native-gesture-handler';
+import type {
+  EasingFunction,
+  EasingFunctionFactory,
+  ReduceMotion,
+} from 'react-native-reanimated';
 
 export type Rect = {
   x: number;
@@ -91,3 +96,9 @@ export type ZoomEventCallbacks = Partial<{
 }>;
 
 export type BoundsFuction = (scale?: number) => Vector<number>;
+
+export type TimingConfig = Partial<{
+  duration: number;
+  easing: EasingFunction | EasingFunctionFactory;
+  reduceMotion: ReduceMotion;
+}>;

src/components/gallery/Gallery.tsx

@@ -40,6 +40,7 @@ const Gallery = <T,>(props: GalleryPropsWithRef<T>) => {
     pinchMode = 'clamp',
     allowPinchPanning = true,
     longPressDuration = 500,
+    snapTransitionConfig,
     customTransition,
     onIndexChange,
     onScroll,
@@ -256,6 +257,7 @@ const Gallery = <T,>(props: GalleryPropsWithRef<T>) => {
         allowPinchPanning={allowPinchPanning}
         pinchMode={pinchMode}
         longPressDuration={longPressDuration}
+        snapTransitionConfig={snapTransitionConfig}
         onTap={onTap}
         onPanStart={onPanStart}
         onPanEnd={onPanEnd}

src/components/gallery/GalleryGestureHandler.tsx

@@ -27,13 +27,14 @@ import type {
   PanGestureEvent,
   ScaleMode,
   PinchMode,
+  TimingConfig,
 } from '../../commons/types';
 import { GalleryContext } from './context';
 import { type GalleryProps } from './types';
 import { getScrollPosition } from '../../commons/utils/getScrollPosition';
 
 const minScale = 1;
-const config = { duration: 300, easing: Easing.linear };
+const defaultConfig = { duration: 300, easing: Easing.linear };
 
 type GalleryGestureHandlerProps = {
   length: number;
@@ -48,6 +49,7 @@ type GalleryGestureHandlerProps = {
   scaleMode: ScaleMode;
   pinchMode: PinchMode;
   longPressDuration: number;
+  snapTransitionConfig?: TimingConfig;
   onTap?: GalleryProps['onTap'];
   onPanStart?: GalleryProps['onPanStart'];
   onPanEnd?: GalleryProps['onPanEnd'];
@@ -77,6 +79,7 @@ const GalleryGestureHandler = ({
   allowPinchPanning,
   pinchMode,
   longPressDuration,
+  snapTransitionConfig = defaultConfig,
   onTap,
   onPanStart,
   onPanEnd,
@@ -162,7 +165,7 @@ const GalleryGestureHandler = ({
     const velocity = vertical ? e.velocityY : e.velocityX;
     const toScroll = snapPoint(scroll.value, velocity, [prev, current, next]);
 
-    scroll.value = withTiming(toScroll, config, (finished) => {
+    scroll.value = withTiming(toScroll, snapTransitionConfig, (finished) => {
       if (!finished) return;
       if (toScroll !== current) {
         activeIndex.value += toScroll === next ? 1 : -1;
@@ -193,13 +196,17 @@ const GalleryGestureHandler = ({
       gap,
     });
 
-    scroll.value = withTiming(newScrollPosition, config, (finished) => {
-      if (!finished) return;
+    scroll.value = withTiming(
+      newScrollPosition,
+      snapTransitionConfig,
+      (finished) => {
+        if (!finished) return;
 
-      activeIndex.value = toIndex;
-      isScrolling.value = false;
-      reset(0, 0, minScale, false);
-    });
+        activeIndex.value = toIndex;
+        isScrolling.value = false;
+        reset(0, 0, minScale, false);
+      }
+    );
   };
 
   useAnimatedReaction(

src/components/gallery/types.ts

@@ -6,6 +6,7 @@ import type {
   PinchMode,
   PinchGestureCallbacks,
   ScaleMode,
+  TimingConfig,
   SizeVector,
   SwipeDirection,
   TapGestureEvent,
@@ -43,6 +44,7 @@ export type GalleryProps<T = unknown> = {
   allowPinchPanning: boolean;
   pinchMode: PinchMode;
   longPressDuration: number;
+  snapTransitionConfig: TimingConfig;
   customTransition: GalleryTransitionCallback;
   onTap: (e: TapGestureEvent, index: number) => void;
   onLongPress: (e: LongPressEvent, index: number) => void;