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

package/lib/typescript/src/BaseSimpleImageSlider.d.ts

@@ -1,14 +1,11 @@
 import React, { type ReactElement } from 'react';
 import { FlashList } from '@shopify/flash-list';
-import { type ImageProps } from 'expo-image';
 import { type StyleProp, type ViewStyle } from 'react-native';
-import { type SharedValue } from 'react-native-reanimated';
+import { type PinchToZoomProps } from './PinchToZoom';
 import { type RenderProp } from './utils/renderProp';
-export type SimpleImageSliderItem = ImageProps & {
-    key: string;
-};
+import type { SimpleImageSliderItem } from './@types/slider';
 export type BaseSimpleImageSliderProps = {
-    data: SimpleImageSliderItem[] | undefined;
+    data: SimpleImageSliderItem[];
     style?: StyleProp<ViewStyle>;
     imageWidth?: number;
     imageHeight?: number;
@@ -25,9 +22,14 @@ export type BaseSimpleImageSliderProps = {
     indexOverride?: number;
     onViewableItemChange?: (index: number) => void;
     enablePinchToZoom?: boolean;
-    onPinchToZoomTranslationChange?: (x: SharedValue<number>, y: SharedValue<number>, scale: SharedValue<number>) => void;
-    onPinchToZoomRequestClose?: () => void;
+    onPinchToZoomStatusChange?: PinchToZoomProps['onTranslationChange'];
+    onPinchToZoomRequestClose?: PinchToZoomProps['onDismiss'];
 };
+/**
+ * @description A simple image slider that displays a list of images. This is the component
+ *  that {@link SimpleImageSlider} and {@link FullScreenImageSlider}
+ *  are built upon. You should normally use one of those two components instead of this one.
+ */
 declare const BaseListImageSlider: React.ForwardRefExoticComponent<BaseSimpleImageSliderProps & React.RefAttributes<FlashList<SimpleImageSliderItem>>>;
 export default BaseListImageSlider;
 //# sourceMappingURL=BaseSimpleImageSlider.d.ts.map

package/lib/typescript/src/BaseSimpleImageSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSimpleImageSlider.d.ts","sourceRoot":"","sources":["../../../src/BaseSimpleImageSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,KAAK,YAAY,EAMpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAA2B,MAAM,qBAAqB,CAAC;AAEzE,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAmB,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEjE,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG;IAC7C,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACrC,IAAI,EAAE,qBAAqB,EAAE,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IAChF,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,YAAY,CAAC;IAC9E,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,oBAAoB,CAAC,EAAE,UAAU,CAAC;IAClC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8BAA8B,CAAC,EAAE,CAC7B,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,EACtB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,EACtB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,KACzB,IAAI,CAAC;IACV,yBAAyB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1C,CAAC;AAqEF,QAAA,MAAM,mBAAmB,qHAgKvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"BaseSimpleImageSlider.d.ts","sourceRoot":"","sources":["../../../src/BaseSimpleImageSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,KAAK,YAAY,EAMpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAA2B,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzE,OAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAmB,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,MAAM,0BAA0B,GAAG;IACrC,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IAChF,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,YAAY,CAAC;IAC9E,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,oBAAoB,CAAC,EAAE,UAAU,CAAC;IAClC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,yBAAyB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IACpE,yBAAyB,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;CAC7D,CAAC;AAqEF;;;;GAIG;AACH,QAAA,MAAM,mBAAmB,qHAgKvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}

package/lib/typescript/src/FullScreenImageSlider.d.ts

@@ -1,15 +1,50 @@
 import React, { type ReactNode } from 'react';
 import { FlashList } from '@shopify/flash-list';
-import { type BaseSimpleImageSliderProps, type SimpleImageSliderItem } from './BaseSimpleImageSlider';
+import { type BaseSimpleImageSliderProps } from './BaseSimpleImageSlider';
+import type { SimpleImageSliderItem } from './@types/slider';
+import { type RenderProp } from './utils/renderProp';
 export type FullScreenImageSliderProps = BaseSimpleImageSliderProps & {
+    /**
+     * @description Whether the modal is open or not.
+     */
     open?: boolean;
+    /**
+     * @description Callback that is called when the modal is requested to be closed.
+     */
     onRequestClose?: () => void;
-    renderDescription?: (index: number) => ReactNode;
+    /**
+     * @description Callback that renders an element to be displayed as the description of the current image.
+     * @param item The current item being displayed.
+     * @param index The index of the current item being displayed.
+     */
+    renderDescription?: (item: SimpleImageSliderItem, index: number) => ReactNode;
+    /**
+     * @description Item to be rendered in place of the default close button icon.
+     */
+    CloseButtonIcon?: RenderProp;
 };
+/**
+ * @description A full screen image slider that displays images in a modal.
+ */
 declare const FullScreenImageSlider: React.ForwardRefExoticComponent<BaseSimpleImageSliderProps & {
+    /**
+     * @description Whether the modal is open or not.
+     */
     open?: boolean | undefined;
+    /**
+     * @description Callback that is called when the modal is requested to be closed.
+     */
     onRequestClose?: (() => void) | undefined;
-    renderDescription?: ((index: number) => ReactNode) | undefined;
+    /**
+     * @description Callback that renders an element to be displayed as the description of the current image.
+     * @param item The current item being displayed.
+     * @param index The index of the current item being displayed.
+     */
+    renderDescription?: ((item: SimpleImageSliderItem, index: number) => ReactNode) | undefined;
+    /**
+     * @description Item to be rendered in place of the default close button icon.
+     */
+    CloseButtonIcon?: RenderProp;
 } & React.RefAttributes<FlashList<SimpleImageSliderItem>>>;
 export default FullScreenImageSlider;
 //# sourceMappingURL=FullScreenImageSlider.d.ts.map

package/lib/typescript/src/FullScreenImageSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FullScreenImageSlider.d.ts","sourceRoot":"","sources":["../../../src/FullScreenImageSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,KAAK,SAAS,EAKjB,MAAM,OAAO,CAAC;AAYf,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAA4B,EACxB,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC7B,MAAM,yBAAyB,CAAC;AAGjC,MAAM,MAAM,0BAA0B,GAAG,0BAA0B,GAAG;IAClE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CACpD,CAAC;AAqBF,QAAA,MAAM,qBAAqB;;4BAvBA,IAAI;iCACC,MAAM,KAAK,SAAS;0DA8GlD,CAAC;AAEH,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"FullScreenImageSlider.d.ts","sourceRoot":"","sources":["../../../src/FullScreenImageSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,KAAK,SAAS,EAKjB,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAA4B,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAG/F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAmB,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEjE,MAAM,MAAM,0BAA0B,GAAG,0BAA0B,GAAG;IAClE;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9E;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;CAChC,CAAC;AAqBF;;GAEG;AACH,QAAA,MAAM,qBAAqB;IA1CvB;;OAEG;;IAEH;;OAEG;4BACoB,IAAI;IAC3B;;;;OAIG;gCACwB,qBAAqB,SAAS,MAAM,KAAK,SAAS;IAC7E;;OAEG;sBACe,UAAU;0DAiI9B,CAAC;AAEH,eAAe,qBAAqB,CAAC"}

package/lib/typescript/src/PageCounter.d.ts

@@ -1,8 +1,17 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 type PageCounterProps = {
+    /**
+     * @description The current page number (**counting from 1**).
+     */
     currentPage: number;
+    /**
+     * @description The total number of pages.
+     */
     totalPages: number;
+    /**
+     * @description Additional styles or styles to override default style of the container View.
+     */
     style?: StyleProp<ViewStyle>;
 };
 export default function PageCounter({ currentPage, totalPages, style }: PageCounterProps): React.JSX.Element;

package/lib/typescript/src/PageCounter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageCounter.d.ts","sourceRoot":"","sources":["../../../src/PageCounter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,SAAS,EAA0B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGtF,KAAK,gBAAgB,GAAG;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,gBAAgB,qBAWvF"}
+{"version":3,"file":"PageCounter.d.ts","sourceRoot":"","sources":["../../../src/PageCounter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,KAAK,gBAAgB,GAAG;IACpB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAcF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,gBAAgB,qBAQvF"}

package/lib/typescript/src/PinchToZoom.d.ts

@@ -1,18 +1,48 @@
 import React, { type PropsWithChildren } from 'react';
 import { type LayoutChangeEvent, type StyleProp, type ViewStyle } from 'react-native';
-import { type SharedValue } from 'react-native-reanimated';
+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, maximumZoomScale, style: propStyle, onPinchStart, onPinchEnd, disabled, onLayout, onTranslationChange, onScaleChange, onScaleReset, children, onRequestClose, }: PinchToZoomProps): React.JSX.Element;
+export default function PinchToZoom({ minimumZoomScale, maximumZoomScale, style: propStyle, disabled, onLayout, onTranslationChange, onScaleChange, onScaleReset, children, onDismiss, }: PinchToZoomProps): React.JSX.Element;
 //# sourceMappingURL=PinchToZoom.d.ts.map

package/lib/typescript/src/PinchToZoom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinchToZoom.d.ts","sourceRoot":"","sources":["../../../src/PinchToZoom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,EACH,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAEd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AACtB,OAAiB,EAGb,KAAK,WAAW,EAKnB,MAAM,yBAAyB,CAAC;AAKjC,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAClB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,EACtB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,EACtB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,KACzB,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,gBAAoB,EACpB,gBAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,cAAc,GACjB,EAAE,gBAAgB,qBA+QlB"}
+{"version":3,"file":"PinchToZoom.d.ts","sourceRoot":"","sources":["../../../src/PinchToZoom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,EACH,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAEd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AAYtB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC7C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,gBAAoB,EACpB,gBAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,QAAQ,EACR,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,qBA4QlB"}

package/lib/typescript/src/SimpleImageSlider.d.ts

@@ -1,10 +1,22 @@
 import React from 'react';
 import { FlashList } from '@shopify/flash-list';
-import { type BaseSimpleImageSliderProps, type SimpleImageSliderItem } from './BaseSimpleImageSlider';
+import { 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.
+ */
 declare const SimpleImageSlider: React.ForwardRefExoticComponent<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 | undefined;
 } & React.RefAttributes<FlashList<SimpleImageSliderItem>>>;
 export default SimpleImageSlider;

package/lib/typescript/src/SimpleImageSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleImageSlider.d.ts","sourceRoot":"","sources":["../../../src/SimpleImageSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD,OAA4B,EACxB,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC7B,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,GAAG;IAC9D,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,iBAAiB;;0DAwDtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SimpleImageSlider.d.ts","sourceRoot":"","sources":["../../../src/SimpleImageSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD,OAA4B,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,GAAG;IAC9D;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,iBAAiB;IAVnB;;;OAGG;;0DA+DN,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/typescript/src/icons/IconX.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { IconsProps } from '../@types/icons';
+declare function IconX({ size, color, stroke, ...props }: IconsProps): React.JSX.Element;
+export default IconX;
+//# sourceMappingURL=IconX.d.ts.map

package/lib/typescript/src/icons/IconX.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconX.d.ts","sourceRoot":"","sources":["../../../../src/icons/IconX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,iBAAS,KAAK,CAAC,EAAE,IAAS,EAAE,KAAiB,EAAE,MAAU,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAkBhF;AACD,eAAe,KAAK,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -2,5 +2,7 @@ import StyledComponentsThemeProvider from './StyledComponentsThemeProvider';
 import BaseListImageSlider, { type BaseSimpleImageSliderProps } from './BaseSimpleImageSlider';
 import SimpleImageSlider, { type SimpleImageSliderProps } from './SimpleImageSlider';
 import FullScreenImageSlider, { type FullScreenImageSliderProps } from './FullScreenImageSlider';
-export { StyledComponentsThemeProvider as SimpleImageSliderThemeProvider, BaseListImageSlider, type BaseSimpleImageSliderProps, SimpleImageSlider, type SimpleImageSliderProps, FullScreenImageSlider, type FullScreenImageSliderProps, };
+import PinchToZoom, { type PinchToZoomProps } from './PinchToZoom';
+import type { SimpleImageSliderItem } from './@types/slider';
+export { StyledComponentsThemeProvider as SimpleImageSliderThemeProvider, BaseListImageSlider, type BaseSimpleImageSliderProps, SimpleImageSlider, type SimpleImageSliderProps, FullScreenImageSlider, type FullScreenImageSliderProps, PinchToZoom, type PinchToZoomProps, type SimpleImageSliderItem, };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,MAAM,iCAAiC,CAAC;AAC5E,OAAO,mBAAmB,EAAE,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,iBAAiB,EAAE,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,qBAAqB,EAAE,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,EACH,6BAA6B,IAAI,8BAA8B,EAC/D,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,qBAAqB,EACrB,KAAK,0BAA0B,GAClC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,MAAM,iCAAiC,CAAC;AAC5E,OAAO,mBAAmB,EAAE,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,iBAAiB,EAAE,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,qBAAqB,EAAE,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,WAAW,EAAE,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,OAAO,EACH,6BAA6B,IAAI,8BAA8B,EAC/D,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,GAC7B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@one-am/react-native-simple-image-slider",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "A simple and performant image slider made with FlashList. Includes a full screen gallery component with gesture support.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -90,7 +90,6 @@
     "react-native-svg": "^15.1.0",
     "release-it": "^15.0.0",
     "styled-components": "^6.1.8",
-    "tabler-icons-react-native": "^2.42.1",
     "typescript": "^5.2.2",
     "typescript-plugin-styled-components": "^3.0.0"
   },
@@ -110,9 +109,8 @@
     "react-native-gesture-handler": "^2.15.0",
     "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "*",
-    "styled-components": "^6.1.8",
-    "tabler-icons-react-native": "*",
-    "react-native-svg": "*"
+    "react-native-svg": "*",
+    "styled-components": "^6.1.8"
   },
   "workspaces": [
     "example"

package/src/@types/icons.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export interface IconsProps extends Partial<Omit<React.SVGProps<SVGSVGElement>, 'stroke'>> {
+    size?: number;
+    stroke?: number;
+}

package/src/@types/pinch-to-zoom.ts

@@ -0,0 +1,9 @@
+import type { SharedValue } from 'react-native-reanimated';
+
+export type PinchToZoomStatus = {
+    scale: SharedValue<number>;
+    translation: {
+        x: SharedValue<number>;
+        y: SharedValue<number>;
+    };
+};

package/src/@types/slider.ts

@@ -0,0 +1,5 @@
+import type { ImageProps } from 'expo-image';
+
+export type SimpleImageSliderItem = ImageProps & {
+    key: string;
+};

package/src/BaseSimpleImageSlider.tsx

@@ -14,17 +14,13 @@ import { Pressable, type StyleProp, type ViewStyle } from 'react-native';
 import type ViewToken from '@shopify/flash-list/src/viewability/ViewToken';
 import styled from 'styled-components/native';
 import PageCounter from './PageCounter';
-import PinchToZoom from './PinchToZoom';
-import { type SharedValue } from 'react-native-reanimated';
+import PinchToZoom, { type PinchToZoomProps } from './PinchToZoom';
 import { GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
 import renderProp, { type RenderProp } from './utils/renderProp';
-
-export type SimpleImageSliderItem = ImageProps & {
-    key: string;
-};
+import type { SimpleImageSliderItem } from './@types/slider';
 
 export type BaseSimpleImageSliderProps = {
-    data: SimpleImageSliderItem[] | undefined;
+    data: SimpleImageSliderItem[];
     style?: StyleProp<ViewStyle>;
     imageWidth?: number;
     imageHeight?: number;
@@ -41,12 +37,8 @@ export type BaseSimpleImageSliderProps = {
     indexOverride?: number;
     onViewableItemChange?: (index: number) => void;
     enablePinchToZoom?: boolean;
-    onPinchToZoomTranslationChange?: (
-        x: SharedValue<number>,
-        y: SharedValue<number>,
-        scale: SharedValue<number>
-    ) => void;
-    onPinchToZoomRequestClose?: () => void;
+    onPinchToZoomStatusChange?: PinchToZoomProps['onTranslationChange'];
+    onPinchToZoomRequestClose?: PinchToZoomProps['onDismiss'];
 };
 
 const StyledAbsoluteComponentContainer = styled.View<{
@@ -116,6 +108,11 @@ const StyledPinchToZoom = styled(PinchToZoom)`
     z-index: 1000;
 `;
 
+/**
+ * @description A simple image slider that displays a list of images. This is the component
+ *  that {@link SimpleImageSlider} and {@link FullScreenImageSlider}
+ *  are built upon. You should normally use one of those two components instead of this one.
+ */
 const BaseListImageSlider = forwardRef<
     FlashList<SimpleImageSliderItem>,
     BaseSimpleImageSliderProps
@@ -138,7 +135,7 @@ const BaseListImageSlider = forwardRef<
         indexOverride,
         onViewableItemChange,
         enablePinchToZoom = false,
-        onPinchToZoomTranslationChange,
+        onPinchToZoomStatusChange,
         onPinchToZoomRequestClose,
     },
     ref
@@ -231,8 +228,8 @@ const BaseListImageSlider = forwardRef<
         <StyledContainer aspectRatio={imageAspectRatio} style={style}>
             {enablePinchToZoom ? (
                 <StyledPinchToZoom
-                    onRequestClose={onPinchToZoomRequestClose}
-                    onTranslationChange={onPinchToZoomTranslationChange}
+                    onDismiss={onPinchToZoomRequestClose}
+                    onTranslationChange={onPinchToZoomStatusChange}
                     onScaleChange={onScaleChange}
                     onScaleReset={onScaleReset}
                     maximumZoomScale={5}

package/src/FullScreenImageSlider.tsx

@@ -7,10 +7,9 @@ import React, {
     useState,
 } from 'react';
 import { Modal, type ScaledSize, StyleSheet, useWindowDimensions } from 'react-native';
-import { IconX } from 'tabler-icons-react-native';
+import IconX from './icons/IconX';
 import Animated, {
     runOnJS,
-    type SharedValue,
     useAnimatedStyle,
     useSharedValue,
     withTiming,
@@ -18,21 +17,36 @@ import Animated, {
 import { setStatusBarStyle } from 'expo-status-bar';
 import styled, { type DefaultTheme, useTheme } from 'styled-components/native';
 import { FlashList } from '@shopify/flash-list';
-import BaseListImageSlider, {
-    type BaseSimpleImageSliderProps,
-    type SimpleImageSliderItem,
-} from './BaseSimpleImageSlider';
+import BaseListImageSlider, { type BaseSimpleImageSliderProps } from './BaseSimpleImageSlider';
 import { type EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { PinchToZoomStatus } from './@types/pinch-to-zoom';
+import type { SimpleImageSliderItem } from './@types/slider';
+import renderProp, { type RenderProp } from './utils/renderProp';
 
 export type FullScreenImageSliderProps = BaseSimpleImageSliderProps & {
+    /**
+     * @description Whether the modal is open or not.
+     */
     open?: boolean;
+    /**
+     * @description Callback that is called when the modal is requested to be closed.
+     */
     onRequestClose?: () => void;
-    renderDescription?: (index: number) => ReactNode;
+    /**
+     * @description Callback that renders an element to be displayed as the description of the current image.
+     * @param item The current item being displayed.
+     * @param index The index of the current item being displayed.
+     */
+    renderDescription?: (item: SimpleImageSliderItem, index: number) => ReactNode;
+    /**
+     * @description Item to be rendered in place of the default close button icon.
+     */
+    CloseButtonIcon?: RenderProp;
 };
 
 const StyledDescriptionContainer = styled.View`
     position: absolute;
-    border-top-width: 1px;
+    border-top-width: ${({ theme }) => theme.styles.borderWidth.xs}px;
     border-top-color: ${({ theme }) => theme.colors.descriptionContainerBorder};
     width: 100%;
     padding-top: ${({ theme }) => theme.styles.spacing.l}px;
@@ -49,11 +63,22 @@ const StyledModalContentContainer = styled(Animated.View)`
     gap: ${({ theme }) => theme.styles.spacing.m}px;
 `;
 
+/**
+ * @description A full screen image slider that displays images in a modal.
+ */
 const FullScreenImageSlider = forwardRef<
     FlashList<SimpleImageSliderItem>,
     FullScreenImageSliderProps
 >(function FullScreenImageSlider(
-    { open, onRequestClose, renderDescription, onViewableItemChange, ...props },
+    {
+        CloseButtonIcon,
+        open,
+        onRequestClose,
+        renderDescription,
+        onViewableItemChange,
+        data,
+        ...props
+    },
     ref
 ) {
     const windowDimensions = useWindowDimensions();
@@ -90,10 +115,10 @@ const FullScreenImageSlider = forwardRef<
         };
     }, []);
 
-    const onPinchToZoomTranslationChange = useCallback(
-        (x: SharedValue<number>, y: SharedValue<number>, scale: SharedValue<number>) => {
+    const onPinchToZoomStatusChange = useCallback(
+        ({ translation, scale }: PinchToZoomStatus) => {
             if (scale.value <= 1) {
-                if (x.value === 0 && y.value === 0) {
+                if (translation.x.value === 0 && translation.y.value === 0) {
                     runOnJS(setStatusBarStyle)('light');
                     backgroundOpacity.value = withTiming(1);
                 } else {
@@ -116,11 +141,16 @@ const FullScreenImageSlider = forwardRef<
         >
             <StyledModalContentContainer style={[styles.modalContent, modalContentStyle]}>
                 <StyledModalCloseButton style={styles.closeButton} onPress={onRequestClose}>
-                    <IconX color={theme.colors.fullScreenCloseButton} />
+                    {CloseButtonIcon ? (
+                        renderProp(CloseButtonIcon)
+                    ) : (
+                        <IconX color={theme.colors.fullScreenCloseButton} />
+                    )}
                 </StyledModalCloseButton>
                 <BaseListImageSlider
+                    data={data}
                     enablePinchToZoom={true}
-                    onPinchToZoomTranslationChange={onPinchToZoomTranslationChange}
+                    onPinchToZoomStatusChange={onPinchToZoomStatusChange}
                     onPinchToZoomRequestClose={onRequestClose}
                     {...props}
                     onViewableItemChange={internalOnViewableItemChange}
@@ -129,9 +159,12 @@ const FullScreenImageSlider = forwardRef<
                     ref={ref}
                 />
 
-                {renderDescription ? (
+                {renderDescription && data[internalIndex] ? (
                     <StyledDescriptionContainer style={styles.descriptionContainer}>
-                        {renderDescription(internalIndex)}
+                        {renderDescription(
+                            data[internalIndex] as SimpleImageSliderItem,
+                            internalIndex
+                        )}
                     </StyledDescriptionContainer>
                 ) : null}
             </StyledModalContentContainer>

package/src/PageCounter.tsx

@@ -1,39 +1,40 @@
-import React, { useMemo } from 'react';
-import { type StyleProp, StyleSheet, Text, View, type ViewStyle } from 'react-native';
-import { type DefaultTheme, useTheme } from 'styled-components/native';
+import React from 'react';
+import { type StyleProp, Text, type ViewStyle } from 'react-native';
+import styled from 'styled-components/native';
 
 type PageCounterProps = {
+    /**
+     * @description The current page number (**counting from 1**).
+     */
     currentPage: number;
+    /**
+     * @description The total number of pages.
+     */
     totalPages: number;
+    /**
+     * @description Additional styles or styles to override default style of the container View.
+     */
     style?: StyleProp<ViewStyle>;
 };
 
-export default function PageCounter({ currentPage, totalPages, style }: PageCounterProps) {
-    const theme = useTheme();
-    const styles = useMemo(() => makeStyles(theme), [theme]);
+const StyledContainer = styled.View`
+    background-color: ${({ theme }) => theme.colors.pageCounterBackground};
+    border-width: ${({ theme }) => theme.styles.borderWidth.xs}px;
+    border-color: ${({ theme }) => theme.colors.pageCounterBorder};
+    border-radius: ${({ theme }) => theme.styles.borderRadius.m}px;
+    padding: ${({ theme }) => `${theme.styles.spacing.s}px ${theme.styles.spacing.s}px`};
+    width: 75px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+`;
 
+export default function PageCounter({ currentPage, totalPages, style }: PageCounterProps) {
     return (
-        <View style={[styles.container, style]}>
+        <StyledContainer style={style}>
             <Text>
                 {currentPage} / {totalPages}
             </Text>
-        </View>
+        </StyledContainer>
     );
 }
-
-const makeStyles = (theme: DefaultTheme) => {
-    return StyleSheet.create({
-        container: {
-            backgroundColor: theme.colors.pageCounterBackground,
-            borderWidth: 1,
-            borderColor: theme.colors.pageCounterBorder,
-            borderRadius: 8,
-            paddingHorizontal: 5,
-            paddingVertical: 6,
-            width: 75,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-    });
-};