react-native-image-collage 0.2.0

package/dist/CollageTile.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollageTile = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const CollageImage_1 = require("./CollageImage");
+const constants_1 = require("./constants");
+exports.CollageTile = (0, react_1.memo)(function CollageTile({ source, remoteUri, index, onPress, borderRadius, style, priority = "normal", placeholderColor, renderImage, transition, }) {
+    const handlePress = (0, react_1.useCallback)(() => onPress?.(index), [onPress, index]);
+    return (<react_native_1.Pressable onPress={handlePress} android_ripple={constants_1.ANDROID_RIPPLE} style={[
+            style,
+            styles.tile,
+            { borderRadius, backgroundColor: placeholderColor },
+        ]}>
+      {(0, CollageImage_1.renderCollageImage)({
+            source,
+            remoteUri,
+            priority,
+            transition: transition ?? (react_native_1.Platform.OS === "android" ? 80 : 150),
+        }, renderImage)}
+    </react_native_1.Pressable>);
+});
+const styles = react_native_1.StyleSheet.create({
+    tile: { overflow: "hidden", minHeight: 0, minWidth: 0 },
+});

package/dist/CollageWithViewer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { CollageWithViewerProps } from "./types";
+export declare const CollageWithViewer: React.NamedExoticComponent<CollageWithViewerProps>;
+//# sourceMappingURL=CollageWithViewer.d.ts.map

package/dist/CollageWithViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollageWithViewer.d.ts","sourceRoot":"","sources":["../src/CollageWithViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD,eAAO,MAAM,iBAAiB,oDA8C5B,CAAC"}

package/dist/CollageWithViewer.js

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollageWithViewer = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const ImageCollage_1 = require("./ImageCollage");
+const imageSources_1 = require("./utils/imageSources");
+exports.CollageWithViewer = (0, react_1.memo)(function CollageWithViewer({ images, renderViewer, onImagePress, ...collageProps }) {
+    const [viewerVisible, setViewerVisible] = (0, react_1.useState)(false);
+    const [viewerIndex, setViewerIndex] = (0, react_1.useState)(0);
+    const viewerImages = (0, react_1.useMemo)(() => (0, imageSources_1.toViewerImages)((0, imageSources_1.normalizeImages)(images)), [images]);
+    const openViewerAt = (0, react_1.useCallback)((index) => {
+        onImagePress?.(index);
+        setViewerIndex(index);
+        setViewerVisible(true);
+    }, [onImagePress]);
+    const closeViewer = (0, react_1.useCallback)(() => {
+        setViewerVisible(false);
+    }, []);
+    if (!viewerImages.length) {
+        return null;
+    }
+    return (<react_native_1.View>
+      <ImageCollage_1.ImageCollage images={images} onImagePress={openViewerAt} {...collageProps}/>
+      {renderViewer({
+            images: viewerImages,
+            visible: viewerVisible,
+            imageIndex: viewerIndex,
+            onRequestClose: closeViewer,
+        })}
+    </react_native_1.View>);
+});

package/dist/ImageCollage.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ImageCollageProps } from "./types";
+export declare const ImageCollage: React.NamedExoticComponent<ImageCollageProps>;
+//# sourceMappingURL=ImageCollage.d.ts.map

package/dist/ImageCollage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCollage.d.ts","sourceRoot":"","sources":["../src/ImageCollage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAWlE,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,SAAS,CAAC;AAoBjB,eAAO,MAAM,YAAY,+CAoIvB,CAAC"}

package/dist/ImageCollage.js

@@ -0,0 +1,135 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageCollage = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const constants_1 = require("./constants");
+const useContainerWidth_1 = require("./hooks/useContainerWidth");
+const layoutHeight_1 = require("./utils/layoutHeight");
+const imageSources_1 = require("./utils/imageSources");
+const renderCollageLayouts_1 = require("./utils/renderCollageLayouts");
+exports.ImageCollage = (0, react_1.memo)(function ImageCollage({ images, height, width, horizontalInset = 0, borderRadius = constants_1.DEFAULT_BORDER_RADIUS, spacing = constants_1.DEFAULT_SPACING, maxVisibleImages = constants_1.DEFAULT_MAX_VISIBLE_IMAGES, onImagePress, layoutMinHeight = constants_1.DEFAULT_LAYOUT_MIN_HEIGHT, layoutMaxHeight = constants_1.DEFAULT_LAYOUT_MAX_HEIGHT, placeholderColor = constants_1.DEFAULT_PLACEHOLDER_COLOR, measureAspectRatios = true, getImagePriority, renderImage, style, }) {
+    const effectiveMaxVisible = Math.max(1, maxVisibleImages);
+    const normalizedImages = (0, react_1.useMemo)(() => (0, imageSources_1.normalizeImages)(images), [images]);
+    const [resolvedImages, setResolvedImages] = (0, react_1.useState)(normalizedImages);
+    const [isResolving, setIsResolving] = (0, react_1.useState)(false);
+    const { containerWidth, onLayout } = (0, useContainerWidth_1.useContainerWidth)({
+        width,
+        horizontalInset,
+    });
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        if (!measureAspectRatios) {
+            setResolvedImages(normalizedImages);
+            setIsResolving(false);
+            return;
+        }
+        const needsMeasurement = normalizedImages.some((image) => image.aspectRatio == null);
+        if (!needsMeasurement) {
+            setResolvedImages(normalizedImages);
+            setIsResolving(false);
+            return;
+        }
+        setIsResolving(true);
+        (0, imageSources_1.resolveImagesWithAspectRatios)(normalizedImages)
+            .then((nextImages) => {
+            if (!cancelled) {
+                setResolvedImages(nextImages);
+            }
+        })
+            .finally(() => {
+            if (!cancelled) {
+                setIsResolving(false);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [measureAspectRatios, normalizedImages]);
+    const layoutHeight = (0, layoutHeight_1.computeLayoutHeight)({
+        contentWidth: containerWidth,
+        images: resolvedImages,
+        height,
+        layoutMinHeight,
+        layoutMaxHeight,
+    });
+    const sharedTileConfig = {
+        onPress: onImagePress,
+        borderRadius,
+        placeholderColor,
+        getImagePriority,
+        renderImage,
+    };
+    if (!resolvedImages.length) {
+        return null;
+    }
+    if (isResolving && measureAspectRatios) {
+        return (<react_native_1.View onLayout={onLayout} style={[
+                style,
+                {
+                    height: layoutHeight,
+                    borderRadius,
+                    backgroundColor: placeholderColor,
+                    overflow: "hidden",
+                },
+            ]}/>);
+    }
+    const count = resolvedImages.length;
+    const { containerStyle, row } = (0, renderCollageLayouts_1.getCollageLayoutStyle)({
+        count,
+        maxVisibleImages: effectiveMaxVisible,
+        layoutHeight,
+        spacing,
+        borderRadius,
+    });
+    return (<react_native_1.View onLayout={onLayout} style={[
+            style,
+            row ? renderCollageLayouts_1.collageLayoutStyles.row : undefined,
+            containerStyle,
+        ]}>
+      {(0, renderCollageLayouts_1.renderCollageContent)({
+            images: resolvedImages,
+            layoutHeight,
+            spacing,
+            borderRadius,
+            placeholderColor,
+            maxVisibleImages: effectiveMaxVisible,
+            onImagePress,
+            renderImage,
+            sharedTileConfig,
+        })}
+    </react_native_1.View>);
+});

package/dist/ImageCollageWithViewer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ImageCollageWithViewerProps } from "./types";
+export declare const ImageCollageWithViewer: React.NamedExoticComponent<ImageCollageWithViewerProps>;
+//# sourceMappingURL=ImageCollageWithViewer.d.ts.map

package/dist/ImageCollageWithViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCollageWithViewer.d.ts","sourceRoot":"","sources":["../src/ImageCollageWithViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,sBAAsB,yDA6CjC,CAAC"}

package/dist/ImageCollageWithViewer.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageCollageWithViewer = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const ImageCollage_1 = require("./ImageCollage");
+const ImageViewer_1 = require("./ImageViewer");
+exports.ImageCollageWithViewer = (0, react_1.memo)(function ImageCollageWithViewer({ images, viewerProps, onImagePress, ...collageProps }) {
+    const [viewerVisible, setViewerVisible] = (0, react_1.useState)(false);
+    const [viewerIndex, setViewerIndex] = (0, react_1.useState)(0);
+    const imageSources = (0, react_1.useMemo)(() => (images ?? []).filter(Boolean).map((uri) => ({ uri })), [images]);
+    const openViewerAt = (0, react_1.useCallback)((index) => {
+        onImagePress?.(index);
+        setViewerIndex(index);
+        setViewerVisible(true);
+    }, [onImagePress]);
+    const closeViewer = (0, react_1.useCallback)(() => {
+        setViewerVisible(false);
+    }, []);
+    if (!imageSources.length)
+        return null;
+    return (<react_native_1.View>
+      <ImageCollage_1.ImageCollage images={images} onImagePress={openViewerAt} {...collageProps}/>
+      <ImageViewer_1.ImageViewer images={imageSources} imageIndex={viewerIndex} visible={viewerVisible} onRequestClose={closeViewer} {...viewerProps}/>
+    </react_native_1.View>);
+});

package/dist/ImageViewer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ImageViewerProps } from "./types";
+export declare const ImageViewer: React.NamedExoticComponent<ImageViewerProps>;
+//# sourceMappingURL=ImageViewer.d.ts.map

package/dist/ImageViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageViewer.d.ts","sourceRoot":"","sources":["../src/ImageViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,WAAW,8CAwEtB,CAAC"}

package/dist/ImageViewer.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageViewer = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_image_viewing_1 = __importDefault(require("react-native-image-viewing"));
+exports.ImageViewer = (0, react_1.memo)(function ImageViewer({ images, visible, imageIndex = 0, onRequestClose, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, presentationStyle = "fullScreen", showCloseButton = true, showIndexFooter = true, closeButtonLabel = "Close", }) {
+    return (<react_native_image_viewing_1.default images={images} imageIndex={imageIndex} visible={visible} onRequestClose={onRequestClose} presentationStyle={presentationStyle} swipeToCloseEnabled={swipeToCloseEnabled} doubleTapToZoomEnabled={doubleTapToZoomEnabled} HeaderComponent={showCloseButton
+            ? () => (<react_native_1.View style={{
+                    position: "absolute",
+                    top: react_native_1.Platform.OS === "android" ? 12 : 50,
+                    right: 12,
+                }}>
+                <react_native_1.Pressable onPress={onRequestClose} style={{
+                    backgroundColor: "rgba(0,0,0,0.45)",
+                    paddingHorizontal: 12,
+                    paddingVertical: 8,
+                    borderRadius: 12,
+                }}>
+                  <react_native_1.Text style={{ color: "#fff", fontWeight: "700" }}>
+                    {closeButtonLabel}
+                  </react_native_1.Text>
+                </react_native_1.Pressable>
+              </react_native_1.View>)
+            : undefined} FooterComponent={showIndexFooter
+            ? ({ imageIndex: currentIndex }) => images.length > 1 ? (<react_native_1.View style={{
+                    position: "absolute",
+                    bottom: 16,
+                    alignSelf: "center",
+                    backgroundColor: "rgba(0,0,0,0.35)",
+                    paddingHorizontal: 12,
+                    paddingVertical: 6,
+                    borderRadius: 12,
+                }}>
+                  <react_native_1.Text style={{ color: "#fff", fontWeight: "700" }}>
+                    {currentIndex + 1} / {images.length}
+                  </react_native_1.Text>
+                </react_native_1.View>) : null
+            : undefined}/>);
+});

package/dist/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const DEFAULT_BLURHASH = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
+export declare const DEFAULT_PLACEHOLDER_COLOR = "#E8E8E8";
+export declare const DEFAULT_SPACING = 6;
+export declare const DEFAULT_BORDER_RADIUS = 12;
+export declare const DEFAULT_LAYOUT_MIN_HEIGHT = 200;
+export declare const DEFAULT_LAYOUT_MAX_HEIGHT = 520;
+export declare const DEFAULT_MAX_VISIBLE_IMAGES = 4;
+export declare const ANDROID_RIPPLE: {
+    readonly color: "rgba(0,0,0,0.08)";
+};
+/** @deprecated Use `DEFAULT_PLACEHOLDER_COLOR` instead. */
+export declare const DEFAULT_PLACEHOLDER_BG = "#E8E8E8";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,iCAAiC,CAAC;AAC/D,eAAO,MAAM,yBAAyB,YAAY,CAAC;AACnD,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,0BAA0B,IAAI,CAAC;AAC5C,eAAO,MAAM,cAAc;;CAAyC,CAAC;AAErE,2DAA2D;AAC3D,eAAO,MAAM,sBAAsB,YAA4B,CAAC"}

package/dist/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PLACEHOLDER_BG = exports.ANDROID_RIPPLE = exports.DEFAULT_MAX_VISIBLE_IMAGES = exports.DEFAULT_LAYOUT_MAX_HEIGHT = exports.DEFAULT_LAYOUT_MIN_HEIGHT = exports.DEFAULT_BORDER_RADIUS = exports.DEFAULT_SPACING = exports.DEFAULT_PLACEHOLDER_COLOR = exports.DEFAULT_BLURHASH = void 0;
+exports.DEFAULT_BLURHASH = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
+exports.DEFAULT_PLACEHOLDER_COLOR = "#E8E8E8";
+exports.DEFAULT_SPACING = 6;
+exports.DEFAULT_BORDER_RADIUS = 12;
+exports.DEFAULT_LAYOUT_MIN_HEIGHT = 200;
+exports.DEFAULT_LAYOUT_MAX_HEIGHT = 520;
+exports.DEFAULT_MAX_VISIBLE_IMAGES = 4;
+exports.ANDROID_RIPPLE = { color: "rgba(0,0,0,0.08)" };
+/** @deprecated Use `DEFAULT_PLACEHOLDER_COLOR` instead. */
+exports.DEFAULT_PLACEHOLDER_BG = exports.DEFAULT_PLACEHOLDER_COLOR;

package/dist/expo/createExpoImageRenderer.d.ts

@@ -0,0 +1,9 @@
+import type { CollageImageRenderer } from "../types";
+type ExpoImageRendererOptions = {
+    blurhash?: string;
+};
+export declare function createExpoImageRenderer(options?: ExpoImageRendererOptions): CollageImageRenderer;
+/** Pre-built renderer using `expo-image` and the default blurhash. */
+export declare const expoImageRenderer: CollageImageRenderer;
+export {};
+//# sourceMappingURL=createExpoImageRenderer.d.ts.map

package/dist/expo/createExpoImageRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createExpoImageRenderer.d.ts","sourceRoot":"","sources":["../../src/expo/createExpoImageRenderer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,OAAO,GAAE,wBAA6B,GACrC,oBAAoB,CA2BtB;AAED,sEAAsE;AACtE,eAAO,MAAM,iBAAiB,sBAA4B,CAAC"}

package/dist/expo/createExpoImageRenderer.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.expoImageRenderer = void 0;
+exports.createExpoImageRenderer = createExpoImageRenderer;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const expo_image_1 = require("expo-image");
+const constants_1 = require("../constants");
+function createExpoImageRenderer(options = {}) {
+    const blurhash = options.blurhash ?? constants_1.DEFAULT_BLURHASH;
+    return function ExpoCollageImage({ source, remoteUri, priority, transition, style, }) {
+        const recyclingKey = remoteUri ?? undefined;
+        return (<expo_image_1.Image source={source} recyclingKey={recyclingKey} cachePolicy="memory-disk" allowDownscaling priority={priority} placeholder={blurhash} placeholderContentFit="cover" contentFit="cover" transition={transition} style={[react_native_1.StyleSheet.absoluteFill, style]}/>);
+    };
+}
+/** Pre-built renderer using `expo-image` and the default blurhash. */
+exports.expoImageRenderer = createExpoImageRenderer();

package/dist/expo/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ExpoImageCollageOptions, ImageCollageProps, ImageCollageWithViewerProps } from "../types";
+export { CollageImage, renderCollageImage } from "../CollageImage";
+export { CollageTile } from "../CollageTile";
+export { CollageWithViewer } from "../CollageWithViewer";
+export { ImageCollage as ImageCollague } from "../ImageCollage";
+export { ImageViewer, createDefaultViewerRenderer } from "../viewer/ImageViewer";
+export { ImageCollageWithViewer as BaseImageCollageWithViewer } from "../viewer/ImageCollageWithViewer";
+export type { CollageImageInput, CollageImageRenderProps, CollageImageRenderer, CollageViewerRenderProps, CollageViewerRenderer, CollageWithViewerProps, ExpoImageCollageOptions, ImageCollageProps, ImageCollageWithViewerProps, ImagePriority, ImageViewerImage, ImageViewerProps, NormalizedCollageImage, } from "../types";
+export { ANDROID_RIPPLE, DEFAULT_BLURHASH, DEFAULT_BORDER_RADIUS, DEFAULT_LAYOUT_MAX_HEIGHT, DEFAULT_LAYOUT_MIN_HEIGHT, DEFAULT_MAX_VISIBLE_IMAGES, DEFAULT_PLACEHOLDER_BG, DEFAULT_PLACEHOLDER_COLOR, DEFAULT_SPACING, } from "../constants";
+export { createExpoImageRenderer, expoImageRenderer, } from "./createExpoImageRenderer";
+type ExpoCollageProps = ImageCollageProps & ExpoImageCollageOptions;
+export declare function ImageCollage(props: ExpoCollageProps): React.JSX.Element;
+export declare function ImageCollageWithViewer({ blurhash, prioritizeFirstImage, renderImage, getImagePriority, viewerProps, renderViewer, onImagePress, ...collageProps }: ImageCollageWithViewerProps & ExpoImageCollageOptions): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/expo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,uBAAuB,EACvB,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,UAAU,CAAC;AAIlB,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,YAAY,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAE,sBAAsB,IAAI,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAExG,YAAY,EACV,iBAAiB,EACjB,uBAAuB,EACvB,oBAAoB,EACpB,wBAAwB,EACxB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,yBAAyB,EACzB,yBAAyB,EACzB,0BAA0B,EAC1B,sBAAsB,EACtB,yBAAyB,EACzB,eAAe,GAChB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC,KAAK,gBAAgB,GAAG,iBAAiB,GAAG,uBAAuB,CAAC;AAmBpE,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB,qBAEnD;AAED,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,oBAAoB,EACpB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,GAAG,YAAY,EAChB,EAAE,2BAA2B,GAAG,uBAAuB,qBAevD"}

package/dist/expo/index.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.expoImageRenderer = exports.createExpoImageRenderer = exports.DEFAULT_SPACING = exports.DEFAULT_PLACEHOLDER_COLOR = exports.DEFAULT_PLACEHOLDER_BG = exports.DEFAULT_MAX_VISIBLE_IMAGES = exports.DEFAULT_LAYOUT_MIN_HEIGHT = exports.DEFAULT_LAYOUT_MAX_HEIGHT = exports.DEFAULT_BORDER_RADIUS = exports.DEFAULT_BLURHASH = exports.ANDROID_RIPPLE = exports.BaseImageCollageWithViewer = exports.createDefaultViewerRenderer = exports.ImageViewer = exports.ImageCollague = exports.CollageWithViewer = exports.CollageTile = exports.renderCollageImage = exports.CollageImage = void 0;
+exports.ImageCollage = ImageCollage;
+exports.ImageCollageWithViewer = ImageCollageWithViewer;
+const react_1 = __importDefault(require("react"));
+const ImageCollage_1 = require("../ImageCollage");
+const ImageCollageWithViewer_1 = require("../viewer/ImageCollageWithViewer");
+const createExpoImageRenderer_1 = require("./createExpoImageRenderer");
+var CollageImage_1 = require("../CollageImage");
+Object.defineProperty(exports, "CollageImage", { enumerable: true, get: function () { return CollageImage_1.CollageImage; } });
+Object.defineProperty(exports, "renderCollageImage", { enumerable: true, get: function () { return CollageImage_1.renderCollageImage; } });
+var CollageTile_1 = require("../CollageTile");
+Object.defineProperty(exports, "CollageTile", { enumerable: true, get: function () { return CollageTile_1.CollageTile; } });
+var CollageWithViewer_1 = require("../CollageWithViewer");
+Object.defineProperty(exports, "CollageWithViewer", { enumerable: true, get: function () { return CollageWithViewer_1.CollageWithViewer; } });
+var ImageCollage_2 = require("../ImageCollage");
+Object.defineProperty(exports, "ImageCollague", { enumerable: true, get: function () { return ImageCollage_2.ImageCollage; } });
+var ImageViewer_1 = require("../viewer/ImageViewer");
+Object.defineProperty(exports, "ImageViewer", { enumerable: true, get: function () { return ImageViewer_1.ImageViewer; } });
+Object.defineProperty(exports, "createDefaultViewerRenderer", { enumerable: true, get: function () { return ImageViewer_1.createDefaultViewerRenderer; } });
+var ImageCollageWithViewer_2 = require("../viewer/ImageCollageWithViewer");
+Object.defineProperty(exports, "BaseImageCollageWithViewer", { enumerable: true, get: function () { return ImageCollageWithViewer_2.ImageCollageWithViewer; } });
+var constants_1 = require("../constants");
+Object.defineProperty(exports, "ANDROID_RIPPLE", { enumerable: true, get: function () { return constants_1.ANDROID_RIPPLE; } });
+Object.defineProperty(exports, "DEFAULT_BLURHASH", { enumerable: true, get: function () { return constants_1.DEFAULT_BLURHASH; } });
+Object.defineProperty(exports, "DEFAULT_BORDER_RADIUS", { enumerable: true, get: function () { return constants_1.DEFAULT_BORDER_RADIUS; } });
+Object.defineProperty(exports, "DEFAULT_LAYOUT_MAX_HEIGHT", { enumerable: true, get: function () { return constants_1.DEFAULT_LAYOUT_MAX_HEIGHT; } });
+Object.defineProperty(exports, "DEFAULT_LAYOUT_MIN_HEIGHT", { enumerable: true, get: function () { return constants_1.DEFAULT_LAYOUT_MIN_HEIGHT; } });
+Object.defineProperty(exports, "DEFAULT_MAX_VISIBLE_IMAGES", { enumerable: true, get: function () { return constants_1.DEFAULT_MAX_VISIBLE_IMAGES; } });
+Object.defineProperty(exports, "DEFAULT_PLACEHOLDER_BG", { enumerable: true, get: function () { return constants_1.DEFAULT_PLACEHOLDER_BG; } });
+Object.defineProperty(exports, "DEFAULT_PLACEHOLDER_COLOR", { enumerable: true, get: function () { return constants_1.DEFAULT_PLACEHOLDER_COLOR; } });
+Object.defineProperty(exports, "DEFAULT_SPACING", { enumerable: true, get: function () { return constants_1.DEFAULT_SPACING; } });
+var createExpoImageRenderer_2 = require("./createExpoImageRenderer");
+Object.defineProperty(exports, "createExpoImageRenderer", { enumerable: true, get: function () { return createExpoImageRenderer_2.createExpoImageRenderer; } });
+Object.defineProperty(exports, "expoImageRenderer", { enumerable: true, get: function () { return createExpoImageRenderer_2.expoImageRenderer; } });
+function buildExpoCollageProps({ blurhash, prioritizeFirstImage = true, renderImage, getImagePriority, ...props }) {
+    return {
+        ...props,
+        renderImage: renderImage ?? (0, createExpoImageRenderer_1.createExpoImageRenderer)({ blurhash }),
+        getImagePriority: getImagePriority ??
+            ((index) => index === 0 && prioritizeFirstImage ? "high" : "normal"),
+    };
+}
+function ImageCollage(props) {
+    return <ImageCollage_1.ImageCollage {...buildExpoCollageProps(props)}/>;
+}
+function ImageCollageWithViewer({ blurhash, prioritizeFirstImage, renderImage, getImagePriority, viewerProps, renderViewer, onImagePress, ...collageProps }) {
+    return (<ImageCollageWithViewer_1.ImageCollageWithViewer {...buildExpoCollageProps({
+        ...collageProps,
+        blurhash,
+        prioritizeFirstImage,
+        renderImage,
+        getImagePriority,
+    })} viewerProps={viewerProps} renderViewer={renderViewer} onImagePress={onImagePress}/>);
+}

package/dist/hooks/useContainerWidth.d.ts

@@ -0,0 +1,10 @@
+import { type LayoutChangeEvent } from "react-native";
+export declare function useContainerWidth({ width, horizontalInset, }: {
+    width?: number;
+    horizontalInset?: number;
+}): {
+    containerWidth: number;
+    onLayout: (event: LayoutChangeEvent) => void;
+    isMeasured: boolean;
+};
+//# sourceMappingURL=useContainerWidth.d.ts.map

package/dist/hooks/useContainerWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerWidth.d.ts","sourceRoot":"","sources":["../../src/hooks/useContainerWidth.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE3E,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,eAAmB,GACpB,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;;sBAIsC,iBAAiB;;EAevD"}

package/dist/hooks/useContainerWidth.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContainerWidth = useContainerWidth;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+function useContainerWidth({ width, horizontalInset = 0, }) {
+    const { width: windowWidth } = (0, react_native_1.useWindowDimensions)();
+    const [measuredWidth, setMeasuredWidth] = (0, react_1.useState)(null);
+    const onLayout = (0, react_1.useCallback)((event) => {
+        const nextWidth = event.nativeEvent.layout.width;
+        if (nextWidth > 0) {
+            setMeasuredWidth(nextWidth);
+        }
+    }, []);
+    const fallbackWidth = Math.max(0, windowWidth - horizontalInset);
+    const containerWidth = width ?? measuredWidth ?? fallbackWidth;
+    return {
+        containerWidth,
+        onLayout,
+        isMeasured: measuredWidth != null,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { ImageCollage } from "./ImageCollage";
+export { CollageWithViewer } from "./CollageWithViewer";
+export { CollageImage, renderCollageImage } from "./CollageImage";
+export { CollageTile } from "./CollageTile";
+/** @deprecated Use `ImageCollage` instead. Kept for backwards compatibility. */
+export { ImageCollage as ImageCollague } from "./ImageCollage";
+export type { CollageImageInput, CollageImageRenderProps, CollageImageRenderer, CollageViewerRenderProps, CollageViewerRenderer, CollageWithViewerProps, ImageCollageProps, ImagePriority, NormalizedCollageImage, } from "./types";
+export { DEFAULT_PLACEHOLDER_COLOR, DEFAULT_PLACEHOLDER_BG, DEFAULT_SPACING, DEFAULT_BORDER_RADIUS, DEFAULT_LAYOUT_MIN_HEIGHT, DEFAULT_LAYOUT_MAX_HEIGHT, DEFAULT_MAX_VISIBLE_IMAGES, ANDROID_RIPPLE, } from "./constants";
+export { normalizeImageInput, normalizeImages, measureImageAspectRatio, resolveImagesWithAspectRatios, toViewerImages, getRemoteUri, } from "./utils/imageSources";
+export { computeLayoutHeight } from "./utils/layoutHeight";
+export { useContainerWidth } from "./hooks/useContainerWidth";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,gFAAgF;AAChF,OAAO,EAAE,YAAY,IAAI,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/D,YAAY,EACV,iBAAiB,EACjB,uBAAuB,EACvB,oBAAoB,EACpB,wBAAwB,EACxB,qBAAqB,EACrB,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,sBAAsB,GACvB,MAAM,SAAS,CAAC;AAEjB,OAAO,EACL,yBAAyB,EACzB,sBAAsB,EACtB,eAAe,EACf,qBAAqB,EACrB,yBAAyB,EACzB,yBAAyB,EACzB,0BAA0B,EAC1B,cAAc,GACf,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,mBAAmB,EACnB,eAAe,EACf,uBAAuB,EACvB,6BAA6B,EAC7B,cAAc,EACd,YAAY,GACb,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC"}