@one-am/react-native-simple-image-slider 0.13.0 → 0.15.0

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

@@ -34,17 +34,17 @@ declare const FullScreenImageSlider: React.ForwardRefExoticComponent<Omit<BaseSi
     /**
      * @description Whether the modal is open or not.
      */
-    open?: boolean | undefined;
+    open?: boolean;
     /**
      * @description Callback that is called when the modal is requested to be closed.
      */
-    onRequestClose?: (() => void) | undefined;
+    onRequestClose?: () => void;
     /**
      * @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;
+    renderDescription?: (item: SimpleImageSliderItem, index: number) => ReactNode;
     /**
      * @description Item to be rendered in place of the default close button icon.
      */
@@ -52,7 +52,7 @@ declare const FullScreenImageSlider: React.ForwardRefExoticComponent<Omit<BaseSi
     /**
      * @description Callback that is called when the modal begins to fade out.
      */
-    onFadeOut?: (() => void) | undefined;
+    onFadeOut?: () => void;
 } & 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;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,IAAI,CAAC,0BAA0B,EAAE,YAAY,CAAC,GAAG;IACtF;;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;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAqBF;;GAEG;AACH,QAAA,MAAM,qBAAqB;IA9CvB;;OAEG;;IAEH;;OAEG;4BACoB,IAAI;IAC3B;;;;OAIG;gCACwB,qBAAqB,SAAS,MAAM,KAAK,SAAS;IAC7E;;OAEG;sBACe,UAAU;IAC5B;;OAEG;uBACe,IAAI;0DAqIxB,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,IAAI,CAAC,0BAA0B,EAAE,YAAY,CAAC,GAAG;IACtF;;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;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAqBF;;GAEG;AACH,QAAA,MAAM,qBAAqB;IA9CvB;;OAEG;WACI,OAAO;IACd;;OAEG;qBACc,MAAM,IAAI;IAC3B;;;;OAIG;wBACiB,CAAC,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS;IAC7E;;OAEG;sBACe,UAAU;IAC5B;;OAEG;gBACS,MAAM,IAAI;0DAkIxB,CAAC;AAEH,eAAe,qBAAqB,CAAC"}

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

@@ -17,6 +17,12 @@ export type SimpleImageSliderProps = BaseSimpleImageSliderProps & {
      * @description Passed to the {@link FullScreenImageSlider} component.
      */
     FullScreenCloseButtonIcon?: FullScreenImageSliderProps['CloseButtonIcon'];
+    /**
+     * @description The aspect ratio of the images when full screen.
+     *
+     * @default {@link FullScreenImageSliderProps.imageAspectRatio}
+     */
+    fullScreenImageAspectRatio?: number;
 };
 /**
  * @description A simple image slider that displays images in a list and can show a {@link FullScreenImageSlider} on press.
@@ -26,15 +32,21 @@ declare const SimpleImageSlider: React.ForwardRefExoticComponent<BaseSimpleImage
      * @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;
+    fullScreenEnabled?: boolean;
     /**
      * @description Passed to the {@link FullScreenImageSlider} component.
      */
-    renderFullScreenDescription?: FullScreenImageSliderProps['renderDescription'];
+    renderFullScreenDescription?: FullScreenImageSliderProps["renderDescription"];
     /**
      * @description Passed to the {@link FullScreenImageSlider} component.
      */
-    FullScreenCloseButtonIcon?: FullScreenImageSliderProps['CloseButtonIcon'];
+    FullScreenCloseButtonIcon?: FullScreenImageSliderProps["CloseButtonIcon"];
+    /**
+     * @description The aspect ratio of the images when full screen.
+     *
+     * @default {@link FullScreenImageSliderProps.imageAspectRatio}
+     */
+    fullScreenImageAspectRatio?: number;
 } & React.RefAttributes<FlashList<SimpleImageSliderItem>>>;
 export default SimpleImageSlider;
 //# sourceMappingURL=SimpleImageSlider.d.ts.map

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;AAEhD,OAA8B,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACjG,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;IAC5B;;OAEG;IACH,2BAA2B,CAAC,EAAE,0BAA0B,CAAC,mBAAmB,CAAC,CAAC;IAC9E;;OAEG;IACH,yBAAyB,CAAC,EAAE,0BAA0B,CAAC,iBAAiB,CAAC,CAAC;CAC7E,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,iBAAiB;IAlBnB;;;OAGG;;IAEH;;OAEG;kCAC2B,0BAA0B,CAAC,mBAAmB,CAAC;IAC7E;;OAEG;gCACyB,0BAA0B,CAAC,iBAAiB,CAAC;0DA6E5E,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;AAEhD,OAA8B,EAAE,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACjG,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;IAC5B;;OAEG;IACH,2BAA2B,CAAC,EAAE,0BAA0B,CAAC,mBAAmB,CAAC,CAAC;IAC9E;;OAEG;IACH,yBAAyB,CAAC,EAAE,0BAA0B,CAAC,iBAAiB,CAAC,CAAC;IAC1E;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACvC,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,iBAAiB;IAxBnB;;;OAGG;wBACiB,OAAO;IAC3B;;OAEG;kCAC2B,0BAA0B,CAAC,mBAAmB,CAAC;IAC7E;;OAEG;gCACyB,0BAA0B,CAAC,iBAAiB,CAAC;IACzE;;;;OAIG;iCAC0B,MAAM;0DAiFtC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@one-am/react-native-simple-image-slider",
-  "version": "0.13.0",
+  "version": "0.15.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",
@@ -36,8 +36,8 @@
   },
   "keywords": [
     "react-native",
-    "ios",
-    "android"
+    "image-slider",
+    "gallery"
   ],
   "repository": {
     "type": "git",
@@ -53,6 +53,22 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
+  "dependencies": {
+    "merge-refs": "^1.2.2"
+  },
+  "peerDependencies": {
+    "@shopify/flash-list": "*",
+    "expo-haptics": "*",
+    "expo-image": "*",
+    "expo-status-bar": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-svg": "*",
+    "styled-components": "*"
+  },
   "devDependencies": {
     "@babel/runtime": "^7.24.1",
     "@commitlint/config-conventional": "^17.0.2",
@@ -83,36 +99,22 @@
     "expo-image": "^1.10.6",
     "expo-status-bar": "^1.11.1",
     "jest": "^29.7.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.4.2",
     "react": "18.2.0",
-    "react-native": "0.73.6",
-    "react-native-builder-bob": "^0.20.0",
-    "react-native-gesture-handler": "^2.15.0",
-    "react-native-reanimated": "^3.3.0",
-    "react-native-safe-area-context": "^4.9.0",
-    "react-native-svg": "^15.1.0",
+    "react-native": "0.74.5",
+    "react-native-builder-bob": "^0.35.2",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-svg": "15.2.0",
+    "react-native-web": "~0.19.6",
     "release-it": "^15.0.0",
-    "styled-components": "^6.1.8",
+    "styled-components": "^6.1.13",
     "typescript": "^5.4.2",
     "typescript-plugin-styled-components": "^3.0.0"
   },
   "resolutions": {
-    "@types/react": "^18.2.44",
-    "styled-components": "^6"
-  },
-  "peerDependencies": {
-    "@babel/core": "*",
-    "@babel/runtime": "*",
-    "expo-haptics": "*",
-    "expo-image": "*",
-    "expo-status-bar": "*",
-    "react": "*",
-    "react-native": "*",
-    "react-native-gesture-handler": "*",
-    "react-native-reanimated": "*",
-    "react-native-safe-area-context": "*",
-    "react-native-svg": "*",
-    "styled-components": "*"
+    "styled-components": "^6.1.13"
   },
   "workspaces": [
     "example"
@@ -160,8 +162,5 @@
         }
       ]
     ]
-  },
-  "dependencies": {
-    "merge-refs": "^1.2.2"
   }
 }

package/src/BaseSimpleImageSlider.tsx

@@ -122,11 +122,6 @@ export type BaseSimpleImageSliderProps = {
      * @description Callback that is called when gestures should lead to a dismissal.
      */
     onPinchToZoomRequestClose?: PinchToZoomProps['onDismiss'];
-    /**
-     * @description If greater than 0, items will be loaded in groups of this size.
-     * @default 5
-     */
-    dataWindowSize?: number;
     /**
      * @description The tag to be used for shared transitions. This is applied to the current image in the list.
      */
@@ -222,7 +217,6 @@ const BaseSimpleImageSlider = forwardRef<
         enablePinchToZoom = false,
         onPinchToZoomStatusChange,
         onPinchToZoomRequestClose,
-        dataWindowSize = 5,
         sharedTransitionTag,
         imageStyle,
     },
@@ -242,23 +236,10 @@ const BaseSimpleImageSlider = forwardRef<
     const [currentItem, setCurrentItem] = useState(0);
 
     const slicedData = useMemo(
-        () => (maxItems !== undefined ? data?.slice(0, maxItems) ?? [] : data ?? []),
+        () => (maxItems !== undefined ? (data?.slice(0, maxItems) ?? []) : (data ?? [])),
         [data, maxItems]
     );
 
-    const [currentGroupIndex, setCurrentGroupIndex] = useState(0);
-
-    const nextGroup = useCallback(() => {
-        setCurrentGroupIndex((prev) => prev + 1);
-    }, []);
-
-    const internalData = useMemo(() => {
-        if (dataWindowSize <= 0) {
-            return slicedData;
-        }
-        return slicedData.slice(0, (currentGroupIndex + 1) * dataWindowSize);
-    }, [currentGroupIndex, dataWindowSize, slicedData]);
-
     useEffect(() => {
         setCurrentItem(indexOverride ?? 0);
 
@@ -342,6 +323,7 @@ const BaseSimpleImageSlider = forwardRef<
 
     const list = (
         <FlashList
+            // @ts-expect-error - there's just a small inconsistency with hitSlop typing
             renderScrollComponent={ScrollView}
             scrollEnabled={scrollEnabled}
             disableScrollViewPanResponder={enablePinchToZoom ? !scrollEnabled : false}
@@ -358,9 +340,7 @@ const BaseSimpleImageSlider = forwardRef<
             horizontal={true}
             keyExtractor={keyExtractor}
             renderItem={renderItem}
-            data={internalData}
-            onEndReached={nextGroup}
-            onEndReachedThreshold={0.5}
+            data={slicedData}
             estimatedItemSize={estimatedItemSize}
             estimatedListSize={{
                 width: estimatedItemSize,

package/src/FullScreenImageSlider.tsx

@@ -169,10 +169,7 @@ const FullScreenImageSlider = forwardRef<
 
                 {renderDescription && data[internalIndex] ? (
                     <StyledDescriptionContainer style={styles.descriptionContainer}>
-                        {renderDescription(
-                            data[internalIndex] as SimpleImageSliderItem,
-                            internalIndex
-                        )}
+                        {renderDescription(data[internalIndex], internalIndex)}
                     </StyledDescriptionContainer>
                 ) : null}
             </StyledModalContentContainer>

package/src/SimpleImageSlider.tsx

@@ -19,6 +19,12 @@ export type SimpleImageSliderProps = BaseSimpleImageSliderProps & {
      * @description Passed to the {@link FullScreenImageSlider} component.
      */
     FullScreenCloseButtonIcon?: FullScreenImageSliderProps['CloseButtonIcon'];
+    /**
+     * @description The aspect ratio of the images when full screen.
+     *
+     * @default {@link FullScreenImageSliderProps.imageAspectRatio}
+     */
+    fullScreenImageAspectRatio?: number;
 };
 
 /**
@@ -33,6 +39,8 @@ const SimpleImageSlider = forwardRef<FlashList<SimpleImageSliderItem>, SimpleIma
             onViewableItemChange,
             FullScreenCloseButtonIcon,
             renderFullScreenDescription,
+            imageAspectRatio,
+            fullScreenImageAspectRatio,
             ...props
         },
         ref
@@ -72,6 +80,7 @@ const SimpleImageSlider = forwardRef<FlashList<SimpleImageSliderItem>, SimpleIma
             <>
                 <BaseListImageSlider
                     {...props}
+                    imageAspectRatio={imageAspectRatio}
                     data={data}
                     ref={mergeRefs(ref, listRef)}
                     onItemPress={fullScreenEnabled ? openFullScreen : onItemPress}
@@ -80,6 +89,7 @@ const SimpleImageSlider = forwardRef<FlashList<SimpleImageSliderItem>, SimpleIma
                 {fullScreenEnabled ? (
                     <FullScreenImageSlider
                         {...props}
+                        imageAspectRatio={fullScreenImageAspectRatio ?? imageAspectRatio}
                         ref={fullScreenListRef}
                         open={fullScreen}
                         onRequestClose={onRequestClose}