@one-am/react-native-simple-image-slider 0.2.2 → 0.3.0

package/src/PinchToZoom.tsx

@@ -8,7 +8,6 @@ import {
 import Animated, {
     cancelAnimation,
     runOnJS,
-    type SharedValue,
     useAnimatedReaction,
     useAnimatedStyle,
     useSharedValue,
@@ -17,38 +16,63 @@ import Animated, {
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { clamp } from './utils/clamp';
 import * as Haptics from 'expo-haptics';
+import type { PinchToZoomStatus } from './@types/pinch-to-zoom';
 
 export type PinchToZoomProps = PropsWithChildren<{
+    /**
+     * @description The minimum zoom scale of the image.
+     * @default 1
+     */
     minimumZoomScale?: number;
+    /**
+     * @description The maximum zoom scale of the image.
+     * @default 8
+     */
     maximumZoomScale?: number;
+    /**
+     * @description Additional styles or styles to override default style of the container View.
+     */
     style?: StyleProp<ViewStyle>;
-    onPinchStart?: () => void;
-    onPinchEnd?: () => void;
+    /**
+     * @description Whether all gestures should be disabled or not.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * @description Callback that is called when the layout of the container changes.
+     * @param {LayoutChangeEvent} e The layout change event.
+     */
     onLayout?: (e: LayoutChangeEvent) => void;
+    /**
+     * @description Callback that is called when the scale of the image changes to a value different from `minimumZoomScale`.
+     */
     onScaleChange?: () => void;
+    /**
+     * @description Callback that is called when the scale of the image changes to `minimumZoomScale`.
+     */
     onScaleReset?: () => void;
-    onTranslationChange?: (
-        x: SharedValue<number>,
-        y: SharedValue<number>,
-        scale: SharedValue<number>
-    ) => void;
-    onRequestClose?: () => void;
+    /**
+     * @description Callback that is called when either the translation or the scale of the image change.
+     * @param {PinchToZoomStatus} status The current status.
+     */
+    onTranslationChange?: (status: PinchToZoomStatus) => void;
+    /**
+     * @description Callback that is called when gestures should lead to the item being dismissed.
+     */
+    onDismiss?: () => void;
 }>;
 
 export default function PinchToZoom({
     minimumZoomScale = 1,
     maximumZoomScale = 8,
     style: propStyle,
-    onPinchStart,
-    onPinchEnd,
     disabled,
     onLayout,
     onTranslationChange,
     onScaleChange,
     onScaleReset,
     children,
-    onRequestClose,
+    onDismiss,
 }: PinchToZoomProps) {
     const { height: windowHeight } = useWindowDimensions();
 
@@ -76,7 +100,6 @@ export default function PinchToZoom({
                     cancelAnimation(scale);
                     prevScale.value = scale.value;
                     offsetScale.value = scale.value;
-                    if (onPinchStart) runOnJS(onPinchStart)();
                     if (onScaleChange) runOnJS(onScaleChange)();
                 })
                 .onUpdate((e) => {
@@ -118,8 +141,8 @@ export default function PinchToZoom({
                     isPinching.value = false;
 
                     if (scale.value < minimumZoomScale / 2 && prevScale.value <= minimumZoomScale) {
-                        if (onRequestClose) {
-                            runOnJS(onRequestClose)();
+                        if (onDismiss) {
+                            runOnJS(onDismiss)();
                         }
                     } else if (scale.value < minimumZoomScale) {
                         runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Light);
@@ -134,8 +157,6 @@ export default function PinchToZoom({
                     prevScale.value = 0;
                     prevTranslationX.value = translationX.value;
                     prevTranslationY.value = translationY.value;
-
-                    if (onPinchEnd) runOnJS(onPinchEnd)();
                 }),
 
         [
@@ -145,7 +166,6 @@ export default function PinchToZoom({
             scale,
             prevScale,
             offsetScale,
-            onPinchStart,
             onScaleChange,
             maximumZoomScale,
             isPinching,
@@ -156,8 +176,7 @@ export default function PinchToZoom({
             viewWidth.value,
             viewHeight.value,
             minimumZoomScale,
-            onPinchEnd,
-            onRequestClose,
+            onDismiss,
             onScaleReset,
         ]
     );
@@ -196,8 +215,8 @@ export default function PinchToZoom({
                             Math.abs(translationX.value) > viewWidth.value / 2 ||
                             Math.abs(translationY.value) > viewHeight.value / 2
                         ) {
-                            if (onRequestClose) {
-                                runOnJS(onRequestClose)();
+                            if (onDismiss) {
+                                runOnJS(onDismiss)();
                             }
                         } else {
                             runOnJS(Haptics.impactAsync)(Haptics.ImpactFeedbackStyle.Light);
@@ -227,7 +246,7 @@ export default function PinchToZoom({
         [
             disabled,
             minimumZoomScale,
-            onRequestClose,
+            onDismiss,
             prevScale.value,
             prevTranslationX,
             prevTranslationY,
@@ -279,14 +298,16 @@ export default function PinchToZoom({
     useAnimatedReaction(
         () => {
             return {
-                scale: scale.value,
-                translationX: translationX.value,
-                translationY: translationY.value,
+                scale: scale,
+                translation: {
+                    x: translationX,
+                    y: translationY,
+                },
             };
         },
-        () => {
+        (prepared) => {
             if (onTranslationChange) {
-                runOnJS(onTranslationChange)(translationX, translationY, scale);
+                runOnJS(onTranslationChange)(prepared);
             }
         },
         [onTranslationChange]

package/src/SimpleImageSlider.tsx

@@ -2,15 +2,20 @@ import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import { FlashList } from '@shopify/flash-list';
 import mergeRefs from 'merge-refs';
 import FullScreenImageSlider from './FullScreenImageSlider';
-import BaseListImageSlider, {
-    type BaseSimpleImageSliderProps,
-    type SimpleImageSliderItem,
-} from './BaseSimpleImageSlider';
+import BaseListImageSlider, { type BaseSimpleImageSliderProps } from './BaseSimpleImageSlider';
+import type { SimpleImageSliderItem } from './@types/slider';
 
 export type SimpleImageSliderProps = BaseSimpleImageSliderProps & {
+    /**
+     * @description Whether the full screen mode is enabled or not. **Caution:** when this is enabled, the `onItemPress` prop will be ignored.
+     * @default false
+     */
     fullScreenEnabled?: boolean;
 };
 
+/**
+ * @description A simple image slider that displays images in a list and can show a {@link FullScreenImageSlider} on press.
+ */
 const SimpleImageSlider = forwardRef<FlashList<SimpleImageSliderItem>, SimpleImageSliderProps>(
     function ListImageSlider(
         { data, fullScreenEnabled = false, onItemPress, onViewableItemChange, ...props },
@@ -49,7 +54,7 @@ const SimpleImageSlider = forwardRef<FlashList<SimpleImageSliderItem>, SimpleIma
                     {...props}
                     data={data}
                     ref={mergeRefs(ref, listRef)}
-                    onItemPress={onItemPress ?? openFullScreen}
+                    onItemPress={openFullScreen ?? onItemPress}
                     onViewableItemChange={internalOnViewableItemChange}
                 />
                 {fullScreenEnabled ? (

package/src/icons/IconX.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import type { IconsProps } from '../@types/icons';
+
+function IconX({ size = 24, color = '#1f2937', stroke = 2, ...props }: IconsProps) {
+    return (
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        <Svg
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            strokeWidth={stroke}
+            stroke={color}
+            fill="none"
+            {...props}
+        >
+            <Path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <Path d="M18 6l-12 12" />
+            <Path d="M6 6l12 12" />
+        </Svg>
+    );
+}
+export default IconX;

package/src/index.tsx

@@ -2,6 +2,8 @@ import StyledComponentsThemeProvider from './StyledComponentsThemeProvider';
 import BaseListImageSlider, { type BaseSimpleImageSliderProps } from './BaseSimpleImageSlider';
 import SimpleImageSlider, { type SimpleImageSliderProps } from './SimpleImageSlider';
 import FullScreenImageSlider, { type FullScreenImageSliderProps } from './FullScreenImageSlider';
+import PinchToZoom, { type PinchToZoomProps } from './PinchToZoom';
+import type { SimpleImageSliderItem } from './@types/slider';
 
 export {
     StyledComponentsThemeProvider as SimpleImageSliderThemeProvider,
@@ -11,4 +13,7 @@ export {
     type SimpleImageSliderProps,
     FullScreenImageSlider,
     type FullScreenImageSliderProps,
+    PinchToZoom,
+    type PinchToZoomProps,
+    type SimpleImageSliderItem,
 };