react-native-image-collage 0.2.0

package/dist/index.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContainerWidth = exports.computeLayoutHeight = exports.getRemoteUri = exports.toViewerImages = exports.resolveImagesWithAspectRatios = exports.measureImageAspectRatio = exports.normalizeImages = exports.normalizeImageInput = 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_BG = exports.DEFAULT_PLACEHOLDER_COLOR = exports.ImageCollague = exports.CollageTile = exports.renderCollageImage = exports.CollageImage = exports.CollageWithViewer = exports.ImageCollage = void 0;
+var ImageCollage_1 = require("./ImageCollage");
+Object.defineProperty(exports, "ImageCollage", { enumerable: true, get: function () { return ImageCollage_1.ImageCollage; } });
+var CollageWithViewer_1 = require("./CollageWithViewer");
+Object.defineProperty(exports, "CollageWithViewer", { enumerable: true, get: function () { return CollageWithViewer_1.CollageWithViewer; } });
+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; } });
+/** @deprecated Use `ImageCollage` instead. Kept for backwards compatibility. */
+var ImageCollage_2 = require("./ImageCollage");
+Object.defineProperty(exports, "ImageCollague", { enumerable: true, get: function () { return ImageCollage_2.ImageCollage; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "DEFAULT_PLACEHOLDER_COLOR", { enumerable: true, get: function () { return constants_1.DEFAULT_PLACEHOLDER_COLOR; } });
+Object.defineProperty(exports, "DEFAULT_PLACEHOLDER_BG", { enumerable: true, get: function () { return constants_1.DEFAULT_PLACEHOLDER_BG; } });
+Object.defineProperty(exports, "DEFAULT_SPACING", { enumerable: true, get: function () { return constants_1.DEFAULT_SPACING; } });
+Object.defineProperty(exports, "DEFAULT_BORDER_RADIUS", { enumerable: true, get: function () { return constants_1.DEFAULT_BORDER_RADIUS; } });
+Object.defineProperty(exports, "DEFAULT_LAYOUT_MIN_HEIGHT", { enumerable: true, get: function () { return constants_1.DEFAULT_LAYOUT_MIN_HEIGHT; } });
+Object.defineProperty(exports, "DEFAULT_LAYOUT_MAX_HEIGHT", { enumerable: true, get: function () { return constants_1.DEFAULT_LAYOUT_MAX_HEIGHT; } });
+Object.defineProperty(exports, "DEFAULT_MAX_VISIBLE_IMAGES", { enumerable: true, get: function () { return constants_1.DEFAULT_MAX_VISIBLE_IMAGES; } });
+Object.defineProperty(exports, "ANDROID_RIPPLE", { enumerable: true, get: function () { return constants_1.ANDROID_RIPPLE; } });
+var imageSources_1 = require("./utils/imageSources");
+Object.defineProperty(exports, "normalizeImageInput", { enumerable: true, get: function () { return imageSources_1.normalizeImageInput; } });
+Object.defineProperty(exports, "normalizeImages", { enumerable: true, get: function () { return imageSources_1.normalizeImages; } });
+Object.defineProperty(exports, "measureImageAspectRatio", { enumerable: true, get: function () { return imageSources_1.measureImageAspectRatio; } });
+Object.defineProperty(exports, "resolveImagesWithAspectRatios", { enumerable: true, get: function () { return imageSources_1.resolveImagesWithAspectRatios; } });
+Object.defineProperty(exports, "toViewerImages", { enumerable: true, get: function () { return imageSources_1.toViewerImages; } });
+Object.defineProperty(exports, "getRemoteUri", { enumerable: true, get: function () { return imageSources_1.getRemoteUri; } });
+var layoutHeight_1 = require("./utils/layoutHeight");
+Object.defineProperty(exports, "computeLayoutHeight", { enumerable: true, get: function () { return layoutHeight_1.computeLayoutHeight; } });
+var useContainerWidth_1 = require("./hooks/useContainerWidth");
+Object.defineProperty(exports, "useContainerWidth", { enumerable: true, get: function () { return useContainerWidth_1.useContainerWidth; } });

package/dist/types.d.ts

@@ -0,0 +1,93 @@
+import type { ReactElement } from "react";
+import type { ImageSourcePropType, ImageStyle, StyleProp, ViewStyle } from "react-native";
+export type ImagePriority = "low" | "normal" | "high";
+/** Remote URL, RN image source, or object with optional aspect ratio. */
+export type CollageImageInput = string | ImageSourcePropType | {
+    uri: string;
+    aspectRatio?: number;
+};
+export type NormalizedCollageImage = {
+    source: ImageSourcePropType;
+    aspectRatio?: number;
+    cacheKey: string;
+    remoteUri?: string;
+};
+export type CollageImageRenderProps = {
+    source: ImageSourcePropType;
+    remoteUri?: string;
+    style?: StyleProp<ImageStyle>;
+    priority?: ImagePriority;
+    transition: number;
+};
+export type CollageImageRenderer = (props: CollageImageRenderProps) => ReactElement;
+export type ImageViewerImage = {
+    uri: string;
+};
+export type CollageViewerRenderProps = {
+    images: ImageViewerImage[];
+    visible: boolean;
+    imageIndex: number;
+    onRequestClose: () => void;
+};
+export type CollageViewerRenderer = (props: CollageViewerRenderProps) => ReactElement | null;
+export type ImageCollageProps = {
+    images: CollageImageInput[] | null | undefined;
+    /** Fixed layout height; when omitted, height is derived from container width. */
+    height?: number;
+    /** Explicit container width; when omitted, width is measured via `onLayout`. */
+    width?: number;
+    /**
+     * @deprecated Prefer automatic `onLayout` sizing. Subtracted from screen width
+     * only before the container has been measured.
+     */
+    horizontalInset?: number;
+    borderRadius?: number;
+    spacing?: number;
+    /**
+     * Maximum tiles to show. When there are more images, the last visible tile
+     * displays a `+N` overlay for the remaining count.
+     *
+     * @example `maxVisibleImages={3}` with 4 images → 3-tile layout, third tile shows `+1`
+     * @example `maxVisibleImages={4}` with 5 images → 2×2 grid, fourth tile shows `+1`
+     */
+    maxVisibleImages?: number;
+    onImagePress?: (index: number) => void;
+    layoutMinHeight?: number;
+    layoutMaxHeight?: number;
+    placeholderColor?: string;
+    /** Measure missing aspect ratios before rendering. */
+    measureAspectRatios?: boolean;
+    /** Optional per-tile loading priority (used by custom renderers such as expo-image). */
+    getImagePriority?: (index: number) => ImagePriority;
+    /** Custom image renderer. Defaults to React Native `Image`. */
+    renderImage?: CollageImageRenderer;
+    style?: StyleProp<ViewStyle>;
+};
+export type CollageWithViewerProps = ImageCollageProps & {
+    renderViewer: CollageViewerRenderer;
+    onImagePress?: (index: number) => void;
+};
+export type ImageViewerProps = {
+    images: ImageViewerImage[];
+    visible: boolean;
+    imageIndex?: number;
+    onRequestClose: () => void;
+    swipeToCloseEnabled?: boolean;
+    doubleTapToZoomEnabled?: boolean;
+    presentationStyle?: "fullScreen" | "pageSheet" | "formSheet" | "overFullScreen";
+    showCloseButton?: boolean;
+    showIndexFooter?: boolean;
+    closeButtonLabel?: string;
+};
+export type ImageCollageWithViewerProps = Omit<ImageCollageProps, "onImagePress"> & {
+    viewerProps?: Omit<ImageViewerProps, "images" | "visible" | "imageIndex" | "onRequestClose">;
+    /** Override the built-in `react-native-image-viewing` viewer. */
+    renderViewer?: CollageViewerRenderer;
+    onImagePress?: (index: number) => void;
+};
+/** Expo-only collage options (`react-native-image-collage/expo`). */
+export type ExpoImageCollageOptions = {
+    blurhash?: string;
+    prioritizeFirstImage?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/imageSources.d.ts

@@ -0,0 +1,11 @@
+import { type ImageSourcePropType } from "react-native";
+import type { CollageImageInput, NormalizedCollageImage } from "../types";
+export declare function getRemoteUri(source: ImageSourcePropType): string | undefined;
+export declare function normalizeImageInput(input: CollageImageInput): NormalizedCollageImage | null;
+export declare function normalizeImages(images: CollageImageInput[] | null | undefined): NormalizedCollageImage[];
+export declare function measureImageAspectRatio(image: NormalizedCollageImage): Promise<number>;
+export declare function resolveImagesWithAspectRatios(images: NormalizedCollageImage[]): Promise<NormalizedCollageImage[]>;
+export declare function toViewerImages(images: NormalizedCollageImage[]): {
+    uri: string;
+}[];
+//# sourceMappingURL=imageSources.d.ts.map

package/dist/utils/imageSources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageSources.d.ts","sourceRoot":"","sources":["../../src/utils/imageSources.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAoB1E,wBAAgB,YAAY,CAC1B,MAAM,EAAE,mBAAmB,GAC1B,MAAM,GAAG,SAAS,CAUpB;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,iBAAiB,GACvB,sBAAsB,GAAG,IAAI,CAgE/B;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,iBAAiB,EAAE,GAAG,IAAI,GAAG,SAAS,GAC7C,sBAAsB,EAAE,CAI1B;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,sBAAsB,GAC5B,OAAO,CAAC,MAAM,CAAC,CA0BjB;AAED,wBAAsB,6BAA6B,CACjD,MAAM,EAAE,sBAAsB,EAAE,GAC/B,OAAO,CAAC,sBAAsB,EAAE,CAAC,CAenC;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,sBAAsB,EAAE,GAC/B;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,CAOnB"}

package/dist/utils/imageSources.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRemoteUri = getRemoteUri;
+exports.normalizeImageInput = normalizeImageInput;
+exports.normalizeImages = normalizeImages;
+exports.measureImageAspectRatio = measureImageAspectRatio;
+exports.resolveImagesWithAspectRatios = resolveImagesWithAspectRatios;
+exports.toViewerImages = toViewerImages;
+const react_native_1 = require("react-native");
+function cacheKeyForSource(source) {
+    if (typeof source === "number") {
+        return `asset-${source}`;
+    }
+    if (typeof source === "object" && source) {
+        if ("uri" in source && source.uri) {
+            return source.uri;
+        }
+        if ("testUri" in source && typeof source.testUri === "string") {
+            return source.testUri;
+        }
+    }
+    return JSON.stringify(source);
+}
+function getRemoteUri(source) {
+    if (typeof source === "number") {
+        return react_native_1.Image.resolveAssetSource(source)?.uri;
+    }
+    if (typeof source === "object" && source && "uri" in source && source.uri) {
+        return source.uri;
+    }
+    return undefined;
+}
+function normalizeImageInput(input) {
+    if (input == null || input === "") {
+        return null;
+    }
+    if (typeof input === "string") {
+        const source = { uri: input };
+        return {
+            source,
+            aspectRatio: undefined,
+            cacheKey: input,
+            remoteUri: input,
+        };
+    }
+    if (typeof input === "number") {
+        const source = input;
+        const resolved = react_native_1.Image.resolveAssetSource(source);
+        const aspectRatio = resolved?.width && resolved?.height
+            ? resolved.width / resolved.height
+            : undefined;
+        return {
+            source,
+            aspectRatio,
+            cacheKey: cacheKeyForSource(source),
+            remoteUri: resolved?.uri,
+        };
+    }
+    if (typeof input === "object" && input != null && "uri" in input) {
+        const uri = input.uri;
+        if (typeof uri === "string") {
+            const keys = Object.keys(input);
+            const isUriDescriptor = keys.every((key) => key === "uri" || key === "aspectRatio");
+            if (isUriDescriptor) {
+                const aspectRatio = "aspectRatio" in input
+                    ? input.aspectRatio
+                    : undefined;
+                return {
+                    source: { uri },
+                    aspectRatio,
+                    cacheKey: uri,
+                    remoteUri: uri,
+                };
+            }
+        }
+    }
+    const source = input;
+    const remoteUri = getRemoteUri(source);
+    return {
+        source,
+        aspectRatio: undefined,
+        cacheKey: cacheKeyForSource(source),
+        remoteUri,
+    };
+}
+function normalizeImages(images) {
+    return (images ?? [])
+        .map(normalizeImageInput)
+        .filter((image) => image != null);
+}
+function measureImageAspectRatio(image) {
+    if (image.aspectRatio != null) {
+        return Promise.resolve(image.aspectRatio);
+    }
+    if (typeof image.source === "number") {
+        const resolved = react_native_1.Image.resolveAssetSource(image.source);
+        if (resolved?.width && resolved?.height) {
+            return Promise.resolve(resolved.width / resolved.height);
+        }
+        return Promise.reject(new Error("Unable to resolve local image dimensions"));
+    }
+    const uri = getRemoteUri(image.source);
+    if (!uri) {
+        return Promise.reject(new Error("Unable to measure image without a URI"));
+    }
+    return new Promise((resolve, reject) => {
+        react_native_1.Image.getSize(uri, (width, height) => resolve(width / height), reject);
+    });
+}
+async function resolveImagesWithAspectRatios(images) {
+    return Promise.all(images.map(async (image) => {
+        if (image.aspectRatio != null) {
+            return image;
+        }
+        try {
+            const aspectRatio = await measureImageAspectRatio(image);
+            return { ...image, aspectRatio };
+        }
+        catch {
+            return image;
+        }
+    }));
+}
+function toViewerImages(images) {
+    return images
+        .map((image) => {
+        const uri = image.remoteUri ?? getRemoteUri(image.source);
+        return uri ? { uri } : null;
+    })
+        .filter((image) => image != null);
+}

package/dist/utils/layoutHeight.d.ts

@@ -0,0 +1,9 @@
+import type { NormalizedCollageImage } from "../types";
+export declare function computeLayoutHeight({ contentWidth, images, height, layoutMinHeight, layoutMaxHeight, }: {
+    contentWidth: number;
+    images: NormalizedCollageImage[];
+    height?: number;
+    layoutMinHeight: number;
+    layoutMaxHeight: number;
+}): number;
+//# sourceMappingURL=layoutHeight.d.ts.map

package/dist/utils/layoutHeight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutHeight.d.ts","sourceRoot":"","sources":["../../src/utils/layoutHeight.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAsBvD,wBAAgB,mBAAmB,CAAC,EAClC,YAAY,EACZ,MAAM,EACN,MAAM,EACN,eAAe,EACf,eAAe,GAChB,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,sBAAsB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB,GAAG,MAAM,CAmBT"}

package/dist/utils/layoutHeight.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeLayoutHeight = computeLayoutHeight;
+function heightRatioForImageCount(count) {
+    if (count <= 1)
+        return 0.9;
+    if (count === 2)
+        return 0.75;
+    if (count === 3)
+        return 0.9;
+    if (count === 4)
+        return 1.0;
+    return 1.05;
+}
+function averageAspectRatio(images) {
+    const ratios = images
+        .map((image) => image.aspectRatio)
+        .filter((ratio) => ratio != null && ratio > 0);
+    if (!ratios.length) {
+        return undefined;
+    }
+    return ratios.reduce((sum, ratio) => sum + ratio, 0) / ratios.length;
+}
+function computeLayoutHeight({ contentWidth, images, height, layoutMinHeight, layoutMaxHeight, }) {
+    if (height != null) {
+        return Math.max(layoutMinHeight, Math.min(height, layoutMaxHeight));
+    }
+    const count = images.length;
+    let ratio = heightRatioForImageCount(count);
+    if (count === 1 && images[0]?.aspectRatio) {
+        ratio = 1 / images[0].aspectRatio;
+    }
+    else if (count === 2) {
+        const averageRatio = averageAspectRatio(images);
+        if (averageRatio) {
+            ratio = 1 / averageRatio;
+        }
+    }
+    const computedHeight = Math.round(contentWidth * ratio);
+    return Math.max(layoutMinHeight, Math.min(computedHeight, layoutMaxHeight));
+}

package/dist/utils/renderCollageLayouts.d.ts

@@ -0,0 +1,97 @@
+import React from "react";
+import type { CollageImageRenderer, ImagePriority, NormalizedCollageImage } from "../types";
+type SharedTileConfig = {
+    onPress?: (index: number) => void;
+    borderRadius: number;
+    placeholderColor: string;
+    getImagePriority?: (index: number) => ImagePriority;
+    renderImage?: CollageImageRenderer;
+};
+type RenderCollageContentOptions = {
+    images: NormalizedCollageImage[];
+    layoutHeight: number;
+    spacing: number;
+    borderRadius: number;
+    placeholderColor: string;
+    maxVisibleImages: number;
+    onImagePress?: (index: number) => void;
+    renderImage?: CollageImageRenderer;
+    sharedTileConfig: SharedTileConfig;
+};
+export declare function renderCollageContent(options: RenderCollageContentOptions): React.JSX.Element;
+export declare function getCollageLayoutStyle({ count, maxVisibleImages, layoutHeight, spacing, borderRadius, }: {
+    count: number;
+    maxVisibleImages: number;
+    layoutHeight: number;
+    spacing: number;
+    borderRadius: number;
+}): {
+    containerStyle: {
+        height: number;
+        borderRadius: number;
+        overflow: "hidden";
+        gap?: undefined;
+        minHeight?: undefined;
+    };
+    row: boolean;
+} | {
+    containerStyle: {
+        height: number;
+        gap: number;
+        borderRadius?: undefined;
+        overflow?: undefined;
+        minHeight?: undefined;
+    };
+    row: boolean;
+} | {
+    containerStyle: {
+        height: number;
+        gap: number;
+        overflow: "hidden";
+        minHeight: number;
+        borderRadius?: undefined;
+    };
+    row: boolean;
+};
+declare const styles: {
+    row: {
+        flexDirection: "row";
+        overflow: "hidden";
+        minHeight: number;
+        width: "100%";
+    };
+    flexTile: {
+        flex: number;
+        flexBasis: number;
+        minWidth: number;
+        minHeight: number;
+    };
+    flexColumn: {
+        flex: number;
+        flexBasis: number;
+        minWidth: number;
+        minHeight: number;
+    };
+    overflowTile: {
+        overflow: "hidden";
+        minHeight: number;
+        minWidth: number;
+    };
+    overflowOverlay: {
+        backgroundColor: string;
+        alignItems: "center";
+        justifyContent: "center";
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    overflowText: {
+        color: string;
+        fontSize: number;
+        fontWeight: "800";
+    };
+};
+export { styles as collageLayoutStyles };
+//# sourceMappingURL=renderCollageLayouts.d.ts.map

package/dist/utils/renderCollageLayouts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderCollageLayouts.d.ts","sourceRoot":"","sources":["../../src/utils/renderCollageLayouts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EACV,oBAAoB,EACpB,aAAa,EACb,sBAAsB,EACvB,MAAM,UAAU,CAAC;AAElB,KAAK,gBAAgB,GAAG;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC;IACpD,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACpC,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,MAAM,EAAE,sBAAsB,EAAE,CAAC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC,CAAC;AAkNF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,2BAA2B,qBAmBxE;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,OAAO,EACP,YAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA;AAED,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYV,CAAC;AAEH,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,CAAC"}

package/dist/utils/renderCollageLayouts.js

@@ -0,0 +1,183 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collageLayoutStyles = void 0;
+exports.renderCollageContent = renderCollageContent;
+exports.getCollageLayoutStyle = getCollageLayoutStyle;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const CollageImage_1 = require("../CollageImage");
+const CollageTile_1 = require("../CollageTile");
+const constants_1 = require("../constants");
+function renderTile(image, index, shared, style, priority, transition) {
+    return (<CollageTile_1.CollageTile key={`${image.cacheKey}-${index}`} source={image.source} remoteUri={image.remoteUri} index={index} onPress={shared.onPress} borderRadius={shared.borderRadius} placeholderColor={shared.placeholderColor} renderImage={shared.renderImage} priority={priority ?? shared.getImagePriority?.(index) ?? "normal"} transition={transition} style={style}/>);
+}
+function renderOverflowTile({ image, tileIndex, overflowCount, borderRadius, placeholderColor, onImagePress, renderImage, }) {
+    return (<react_native_1.Pressable onPress={() => onImagePress?.(tileIndex)} android_ripple={constants_1.ANDROID_RIPPLE} style={[
+            styles.overflowTile,
+            styles.flexTile,
+            {
+                borderRadius,
+                backgroundColor: placeholderColor,
+            },
+        ]}>
+      {(0, CollageImage_1.renderCollageImage)({
+            source: image.source,
+            remoteUri: image.remoteUri,
+            priority: "normal",
+            transition: 0,
+        }, renderImage)}
+      {overflowCount > 0 && (<react_native_1.View pointerEvents="none" style={styles.overflowOverlay}>
+          <react_native_1.Text style={styles.overflowText}>{`+${overflowCount}`}</react_native_1.Text>
+        </react_native_1.View>)}
+    </react_native_1.Pressable>);
+}
+function resolveVisibleLayout(count, maxVisibleImages) {
+    const hasOverflow = count > maxVisibleImages;
+    const visibleCount = hasOverflow ? maxVisibleImages : count;
+    const overflowCount = hasOverflow ? count - maxVisibleImages : 0;
+    const overflowTileIndex = visibleCount - 1;
+    return {
+        hasOverflow,
+        visibleCount,
+        overflowCount,
+        overflowTileIndex,
+    };
+}
+function renderSingleLayout(images, options, layout) {
+    const { layoutHeight, sharedTileConfig } = options;
+    const image = images[0];
+    if (layout.hasOverflow) {
+        return renderOverflowTile({
+            image,
+            tileIndex: 0,
+            overflowCount: layout.overflowCount,
+            borderRadius: options.borderRadius,
+            placeholderColor: options.placeholderColor,
+            onImagePress: options.onImagePress,
+            renderImage: options.renderImage,
+        });
+    }
+    return renderTile(image, 0, sharedTileConfig, { height: layoutHeight });
+}
+function renderTwoLayout(images, options, layout) {
+    const { sharedTileConfig } = options;
+    return (<>
+      {renderTile(images[0], 0, sharedTileConfig, styles.flexTile)}
+      {layout.hasOverflow ? (renderOverflowTile({
+            image: images[1],
+            tileIndex: 1,
+            overflowCount: layout.overflowCount,
+            borderRadius: options.borderRadius,
+            placeholderColor: options.placeholderColor,
+            onImagePress: options.onImagePress,
+            renderImage: options.renderImage,
+        })) : (renderTile(images[1], 1, sharedTileConfig, styles.flexTile))}
+    </>);
+}
+function renderThreeLayout(images, options, layout) {
+    const { spacing, sharedTileConfig } = options;
+    return (<>
+      {renderTile(images[0], 0, sharedTileConfig, styles.flexTile)}
+      <react_native_1.View style={[styles.flexColumn, { gap: spacing }]}>
+        {renderTile(images[1], 1, sharedTileConfig, styles.flexTile)}
+        {layout.hasOverflow ? (renderOverflowTile({
+            image: images[2],
+            tileIndex: 2,
+            overflowCount: layout.overflowCount,
+            borderRadius: options.borderRadius,
+            placeholderColor: options.placeholderColor,
+            onImagePress: options.onImagePress,
+            renderImage: options.renderImage,
+        })) : (renderTile(images[2], 2, sharedTileConfig, styles.flexTile))}
+      </react_native_1.View>
+    </>);
+}
+function renderGridLayout(images, options, layout) {
+    const { spacing, sharedTileConfig } = options;
+    const topRow = images.slice(0, 2);
+    const bottomLeft = images[2];
+    const bottomRight = images[3];
+    return (<>
+      <react_native_1.View style={[styles.row, { flex: 1, gap: spacing }]}>
+        {topRow.map((image, index) => renderTile(image, index, sharedTileConfig, styles.flexTile))}
+      </react_native_1.View>
+      <react_native_1.View style={[styles.row, { flex: 1, gap: spacing }]}>
+        {bottomLeft
+            ? renderTile(bottomLeft, 2, sharedTileConfig, styles.flexTile)
+            : null}
+        {bottomRight ? (layout.hasOverflow ? (renderOverflowTile({
+            image: bottomRight,
+            tileIndex: 3,
+            overflowCount: layout.overflowCount,
+            borderRadius: options.borderRadius,
+            placeholderColor: options.placeholderColor,
+            onImagePress: options.onImagePress,
+            renderImage: options.renderImage,
+        })) : (renderTile(bottomRight, 3, sharedTileConfig, styles.flexTile))) : null}
+      </react_native_1.View>
+    </>);
+}
+function renderCollageContent(options) {
+    const { images, maxVisibleImages } = options;
+    const count = images.length;
+    const layout = resolveVisibleLayout(count, maxVisibleImages);
+    const visibleImages = images.slice(0, layout.visibleCount);
+    if (layout.visibleCount === 1) {
+        return renderSingleLayout(visibleImages, options, layout);
+    }
+    if (layout.visibleCount === 2) {
+        return renderTwoLayout(visibleImages, options, layout);
+    }
+    if (layout.visibleCount === 3) {
+        return renderThreeLayout(visibleImages, options, layout);
+    }
+    return renderGridLayout(visibleImages, options, layout);
+}
+function getCollageLayoutStyle({ count, maxVisibleImages, layoutHeight, spacing, borderRadius, }) {
+    const { visibleCount } = resolveVisibleLayout(count, maxVisibleImages);
+    if (visibleCount === 1) {
+        return {
+            containerStyle: {
+                height: layoutHeight,
+                borderRadius,
+                overflow: "hidden",
+            },
+            row: false,
+        };
+    }
+    if (visibleCount === 2 || visibleCount === 3) {
+        return {
+            containerStyle: {
+                height: layoutHeight,
+                gap: spacing,
+            },
+            row: true,
+        };
+    }
+    return {
+        containerStyle: {
+            height: layoutHeight,
+            gap: spacing,
+            overflow: "hidden",
+            minHeight: 0,
+        },
+        row: false,
+    };
+}
+const styles = react_native_1.StyleSheet.create({
+    row: { flexDirection: "row", overflow: "hidden", minHeight: 0, width: "100%" },
+    flexTile: { flex: 1, flexBasis: 0, minWidth: 0, minHeight: 0 },
+    flexColumn: { flex: 1, flexBasis: 0, minWidth: 0, minHeight: 0 },
+    overflowTile: { overflow: "hidden", minHeight: 0, minWidth: 0 },
+    overflowOverlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: "rgba(0,0,0,0.35)",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    overflowText: { color: "#fff", fontSize: 24, fontWeight: "800" },
+});
+exports.collageLayoutStyles = styles;

package/dist/viewer/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/viewer/ImageCollageWithViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCollageWithViewer.d.ts","sourceRoot":"","sources":["../../src/viewer/ImageCollageWithViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAG5D,eAAO,MAAM,sBAAsB,yDAkBjC,CAAC"}