react-native-image-collage 0.2.0

package/dist/viewer/ImageCollageWithViewer.js

@@ -0,0 +1,43 @@
+"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 CollageWithViewer_1 = require("../CollageWithViewer");
+const ImageViewer_1 = require("./ImageViewer");
+exports.ImageCollageWithViewer = (0, react_1.memo)(function ImageCollageWithViewer({ viewerProps, renderViewer, onImagePress, ...collageProps }) {
+    const defaultRenderer = (0, react_1.useMemo)(() => (0, ImageViewer_1.createDefaultViewerRenderer)(viewerProps), [viewerProps]);
+    return (<CollageWithViewer_1.CollageWithViewer {...collageProps} onImagePress={onImagePress} renderViewer={renderViewer ?? defaultRenderer}/>);
+});

package/dist/viewer/ImageViewer.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { CollageViewerRenderProps, ImageViewerProps } from "../types";
+export declare const ImageViewer: React.NamedExoticComponent<ImageViewerProps>;
+export declare function createDefaultViewerRenderer(viewerProps?: Omit<ImageViewerProps, "images" | "visible" | "imageIndex" | "onRequestClose">): (props: CollageViewerRenderProps) => React.JSX.Element;
+//# sourceMappingURL=ImageViewer.d.ts.map

package/dist/viewer/ImageViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageViewer.d.ts","sourceRoot":"","sources":["../../src/viewer/ImageViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE3E,eAAO,MAAM,WAAW,8CA4EtB,CAAC;AAEH,wBAAgB,2BAA2B,CACzC,WAAW,CAAC,EAAE,IAAI,CAChB,gBAAgB,EAChB,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,gBAAgB,CACvD,IAEqC,OAAO,wBAAwB,uBAGtE"}

package/dist/viewer/ImageViewer.js

@@ -0,0 +1,85 @@
+"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;
+exports.createDefaultViewerRenderer = createDefaultViewerRenderer;
+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", }) {
+    if (!visible) {
+        return null;
+    }
+    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}/>);
+});
+function createDefaultViewerRenderer(viewerProps) {
+    return function DefaultViewerRenderer(props) {
+        return <exports.ImageViewer {...viewerProps} {...props}/>;
+    };
+}

package/dist/viewer/index.d.ts

@@ -0,0 +1,4 @@
+export { ImageViewer, createDefaultViewerRenderer } from "./ImageViewer";
+export { ImageCollageWithViewer } from "./ImageCollageWithViewer";
+export type { ImageViewerProps, ImageCollageWithViewerProps, CollageViewerRenderProps, CollageViewerRenderer, ImageViewerImage, } from "../types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/viewer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,YAAY,EACV,gBAAgB,EAChB,2BAA2B,EAC3B,wBAAwB,EACxB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,UAAU,CAAC"}

package/dist/viewer/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageCollageWithViewer = exports.createDefaultViewerRenderer = exports.ImageViewer = void 0;
+var ImageViewer_1 = require("./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_1 = require("./ImageCollageWithViewer");
+Object.defineProperty(exports, "ImageCollageWithViewer", { enumerable: true, get: function () { return ImageCollageWithViewer_1.ImageCollageWithViewer; } });

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "react-native-image-collage",
+  "version": "0.2.0",
+  "description": "Responsive image collage layouts for React Native with an optional full-screen image viewer",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./viewer": {
+      "react-native": "./src/viewer/index.ts",
+      "types": "./dist/viewer/index.d.ts",
+      "default": "./dist/viewer/index.js"
+    },
+    "./expo": {
+      "react-native": "./src/expo/index.tsx",
+      "types": "./dist/expo/index.d.ts",
+      "default": "./dist/expo/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepare": "npm run build",
+    "typecheck": "tsc --noEmit",
+    "example": "npm run build && npm install --prefix example && npm run start --prefix example -- --clear"
+  },
+  "keywords": [
+    "react-native",
+    "image",
+    "collage",
+    "gallery",
+    "image-viewer",
+    "expo"
+  ],
+  "author": "Faisal Khawaj",
+  "license": "MIT",
+  "peerDependencies": {
+    "expo-image": ">=1.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-image-viewing": ">=0.2.0"
+  },
+  "peerDependenciesMeta": {
+    "expo-image": {
+      "optional": true
+    },
+    "react-native-image-viewing": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "expo-image": "^3.0.10",
+    "react": "^19.0.0",
+    "react-native": "^0.81.0",
+    "react-native-image-viewing": "^0.2.2",
+    "typescript": "^5.8.0"
+  }
+}

package/src/CollageImage.tsx

@@ -0,0 +1,41 @@
+import React, { memo } from "react";
+import {
+  Image,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  ImageStyle,
+  type ImageSourcePropType,
+} from "react-native";
+import type { CollageImageRenderProps, CollageImageRenderer } from "./types";
+
+export const CollageImage = memo(function CollageImage({
+  source,
+  style,
+  transition = Platform.OS === "android" ? 80 : 150,
+}: CollageImageRenderProps) {
+  return (
+    <Image
+      source={source}
+      resizeMode="cover"
+      fadeDuration={transition}
+      style={[StyleSheet.absoluteFill, style]}
+    />
+  );
+});
+
+export function renderCollageImage(
+  props: CollageImageRenderProps,
+  renderImage?: CollageImageRenderer,
+  style?: StyleProp<ImageStyle>,
+) {
+  const imageProps = style ? { ...props, style } : props;
+
+  if (renderImage) {
+    return renderImage(imageProps);
+  }
+
+  return <CollageImage {...imageProps} />;
+}
+
+export type { ImageSourcePropType };

package/src/CollageTile.tsx

@@ -0,0 +1,69 @@
+import React, { memo, useCallback } from "react";
+import {
+  Platform,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+  type ImageSourcePropType,
+} from "react-native";
+import { renderCollageImage } from "./CollageImage";
+import { ANDROID_RIPPLE } from "./constants";
+import type {
+  CollageImageRenderer,
+  ImagePriority,
+} from "./types";
+
+type CollageTileProps = {
+  source: ImageSourcePropType;
+  remoteUri?: string;
+  index: number;
+  onPress?: (index: number) => void;
+  borderRadius: number;
+  style?: StyleProp<ViewStyle>;
+  priority?: ImagePriority;
+  placeholderColor: string;
+  renderImage?: CollageImageRenderer;
+  transition?: number;
+};
+
+export const CollageTile = memo(function CollageTile({
+  source,
+  remoteUri,
+  index,
+  onPress,
+  borderRadius,
+  style,
+  priority = "normal",
+  placeholderColor,
+  renderImage,
+  transition,
+}: CollageTileProps) {
+  const handlePress = useCallback(() => onPress?.(index), [onPress, index]);
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      android_ripple={ANDROID_RIPPLE}
+      style={[
+        style,
+        styles.tile,
+        { borderRadius, backgroundColor: placeholderColor },
+      ]}
+    >
+      {renderCollageImage(
+        {
+          source,
+          remoteUri,
+          priority,
+          transition: transition ?? (Platform.OS === "android" ? 80 : 150),
+        },
+        renderImage,
+      )}
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  tile: { overflow: "hidden", minHeight: 0, minWidth: 0 },
+});

package/src/CollageWithViewer.tsx

@@ -0,0 +1,53 @@
+import React, { memo, useCallback, useMemo, useState } from "react";
+import { View } from "react-native";
+import { ImageCollage } from "./ImageCollage";
+import type { CollageWithViewerProps } from "./types";
+import { normalizeImages, toViewerImages } from "./utils/imageSources";
+
+export const CollageWithViewer = memo(function CollageWithViewer({
+  images,
+  renderViewer,
+  onImagePress,
+  ...collageProps
+}: CollageWithViewerProps) {
+  const [viewerVisible, setViewerVisible] = useState(false);
+  const [viewerIndex, setViewerIndex] = useState(0);
+
+  const viewerImages = useMemo(
+    () => toViewerImages(normalizeImages(images)),
+    [images],
+  );
+
+  const openViewerAt = useCallback(
+    (index: number) => {
+      onImagePress?.(index);
+      setViewerIndex(index);
+      setViewerVisible(true);
+    },
+    [onImagePress],
+  );
+
+  const closeViewer = useCallback(() => {
+    setViewerVisible(false);
+  }, []);
+
+  if (!viewerImages.length) {
+    return null;
+  }
+
+  return (
+    <View>
+      <ImageCollage
+        images={images}
+        onImagePress={openViewerAt}
+        {...collageProps}
+      />
+      {renderViewer({
+        images: viewerImages,
+        visible: viewerVisible,
+        imageIndex: viewerIndex,
+        onRequestClose: closeViewer,
+      })}
+    </View>
+  );
+});

package/src/ImageCollage.tsx

@@ -0,0 +1,168 @@
+import React, { memo, useEffect, useMemo, useState } from "react";
+import { View } from "react-native";
+import {
+  DEFAULT_BORDER_RADIUS,
+  DEFAULT_LAYOUT_MAX_HEIGHT,
+  DEFAULT_LAYOUT_MIN_HEIGHT,
+  DEFAULT_MAX_VISIBLE_IMAGES,
+  DEFAULT_PLACEHOLDER_COLOR,
+  DEFAULT_SPACING,
+} from "./constants";
+import { useContainerWidth } from "./hooks/useContainerWidth";
+import type {
+  CollageImageRenderer,
+  ImageCollageProps,
+  ImagePriority,
+} from "./types";
+import { computeLayoutHeight } from "./utils/layoutHeight";
+import {
+  normalizeImages,
+  resolveImagesWithAspectRatios,
+} from "./utils/imageSources";
+import {
+  collageLayoutStyles,
+  getCollageLayoutStyle,
+  renderCollageContent,
+} from "./utils/renderCollageLayouts";
+
+type SharedTileConfig = {
+  onPress?: (index: number) => void;
+  borderRadius: number;
+  placeholderColor: string;
+  getImagePriority?: (index: number) => ImagePriority;
+  renderImage?: CollageImageRenderer;
+};
+
+export const ImageCollage = memo(function ImageCollage({
+  images,
+  height,
+  width,
+  horizontalInset = 0,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  spacing = DEFAULT_SPACING,
+  maxVisibleImages = DEFAULT_MAX_VISIBLE_IMAGES,
+  onImagePress,
+  layoutMinHeight = DEFAULT_LAYOUT_MIN_HEIGHT,
+  layoutMaxHeight = DEFAULT_LAYOUT_MAX_HEIGHT,
+  placeholderColor = DEFAULT_PLACEHOLDER_COLOR,
+  measureAspectRatios = true,
+  getImagePriority,
+  renderImage,
+  style,
+}: ImageCollageProps) {
+  const effectiveMaxVisible = Math.max(1, maxVisibleImages);
+  const normalizedImages = useMemo(() => normalizeImages(images), [images]);
+  const [resolvedImages, setResolvedImages] = useState(normalizedImages);
+  const [isResolving, setIsResolving] = useState(false);
+
+  const { containerWidth, onLayout } = useContainerWidth({
+    width,
+    horizontalInset,
+  });
+
+  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);
+    resolveImagesWithAspectRatios(normalizedImages)
+      .then((nextImages) => {
+        if (!cancelled) {
+          setResolvedImages(nextImages);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsResolving(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [measureAspectRatios, normalizedImages]);
+
+  const layoutHeight = computeLayoutHeight({
+    contentWidth: containerWidth,
+    images: resolvedImages,
+    height,
+    layoutMinHeight,
+    layoutMaxHeight,
+  });
+
+  const sharedTileConfig: SharedTileConfig = {
+    onPress: onImagePress,
+    borderRadius,
+    placeholderColor,
+    getImagePriority,
+    renderImage,
+  };
+
+  if (!resolvedImages.length) {
+    return null;
+  }
+
+  if (isResolving && measureAspectRatios) {
+    return (
+      <View
+        onLayout={onLayout}
+        style={[
+          style,
+          {
+            height: layoutHeight,
+            borderRadius,
+            backgroundColor: placeholderColor,
+            overflow: "hidden",
+          },
+        ]}
+      />
+    );
+  }
+
+  const count = resolvedImages.length;
+  const { containerStyle, row } = getCollageLayoutStyle({
+    count,
+    maxVisibleImages: effectiveMaxVisible,
+    layoutHeight,
+    spacing,
+    borderRadius,
+  });
+
+  return (
+    <View
+      onLayout={onLayout}
+      style={[
+        style,
+        row ? collageLayoutStyles.row : undefined,
+        containerStyle,
+      ]}
+    >
+      {renderCollageContent({
+        images: resolvedImages,
+        layoutHeight,
+        spacing,
+        borderRadius,
+        placeholderColor,
+        maxVisibleImages: effectiveMaxVisible,
+        onImagePress,
+        renderImage,
+        sharedTileConfig,
+      })}
+    </View>
+  );
+});

package/src/constants.ts

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

package/src/expo/createExpoImageRenderer.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { Image } from "expo-image";
+import { DEFAULT_BLURHASH } from "../constants";
+import type { CollageImageRenderer } from "../types";
+
+type ExpoImageRendererOptions = {
+  blurhash?: string;
+};
+
+export function createExpoImageRenderer(
+  options: ExpoImageRendererOptions = {},
+): CollageImageRenderer {
+  const blurhash = options.blurhash ?? DEFAULT_BLURHASH;
+
+  return function ExpoCollageImage({
+    source,
+    remoteUri,
+    priority,
+    transition,
+    style,
+  }) {
+    const recyclingKey = remoteUri ?? undefined;
+
+    return (
+      <Image
+        source={source}
+        recyclingKey={recyclingKey}
+        cachePolicy="memory-disk"
+        allowDownscaling
+        priority={priority}
+        placeholder={blurhash}
+        placeholderContentFit="cover"
+        contentFit="cover"
+        transition={transition}
+        style={[StyleSheet.absoluteFill, style]}
+      />
+    );
+  };
+}
+
+/** Pre-built renderer using `expo-image` and the default blurhash. */
+export const expoImageRenderer = createExpoImageRenderer();