@umituz/react-native-onboarding 3.6.10 → 3.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.10",
+  "version": "3.6.11",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domain/entities/OnboardingSlide.ts

@@ -86,6 +86,22 @@ export interface OnboardingSlide {
    */
   backgroundImage?: any;
 
+  /**
+   * Optional multiple background images (URLs or require paths)
+   * Displayed in a collage/grid pattern behind content
+   * If provided, takes precedence over single backgroundImage
+   */
+  backgroundImages?: any[];
+
+  /**
+   * Layout pattern for multiple background images
+   * 'grid' - Equal sized grid
+   * 'masonry' - Pinterest-style masonry layout
+   * 'collage' - Random sizes and positions
+   * Default: 'grid'
+   */
+  backgroundImagesLayout?: 'grid' | 'masonry' | 'collage';
+
   /**
    * Optional background video (URL or require path)
    * Plays in loop behind content

package/src/index.ts

@@ -69,6 +69,7 @@ export { OnboardingScreen, type OnboardingScreenProps } from "./presentation/scr
 export { OnboardingHeader, type OnboardingHeaderProps } from "./presentation/components/OnboardingHeader";
 export { OnboardingFooter, type OnboardingFooterProps } from "./presentation/components/OnboardingFooter";
 export { OnboardingProvider, type OnboardingProviderProps, useOnboardingProvider } from "./presentation/providers/OnboardingProvider";
+export { BackgroundImageCollage } from "./presentation/components/BackgroundImageCollage";
 export type { OnboardingTheme, OnboardingColors } from "./presentation/types/OnboardingTheme";
 
 // Export OnboardingSlide component

package/src/presentation/components/BackgroundImageCollage.tsx

@@ -0,0 +1,159 @@
+/**
+ * Background Image Collage Component
+ * Displays multiple images in various layout patterns
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, Dimensions } from "react-native";
+import { Image } from "expo-image";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+interface BackgroundImageCollageProps {
+  images: any[];
+  layout?: 'grid' | 'masonry' | 'collage';
+}
+
+interface ImageLayout {
+  source: any;
+  style: {
+    position: 'absolute';
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  };
+}
+
+export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
+  images,
+  layout = 'grid',
+}) => {
+  const imageLayouts = useMemo(() => {
+    if (images.length === 0) return [];
+
+    switch (layout) {
+      case 'grid':
+        return generateGridLayout(images);
+      case 'masonry':
+        return generateMasonryLayout(images);
+      case 'collage':
+        return generateCollageLayout(images);
+      default:
+        return generateGridLayout(images);
+    }
+  }, [images, layout]);
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+      {imageLayouts.map((item, index) => (
+        <Image
+          key={index}
+          source={item.source}
+          style={item.style}
+          contentFit="cover"
+          transition={300}
+        />
+      ))}
+    </View>
+  );
+};
+
+const generateGridLayout = (images: any[]): ImageLayout[] => {
+  const count = images.length;
+  const cols = Math.ceil(Math.sqrt(count));
+  const rows = Math.ceil(count / cols);
+  const cellWidth = SCREEN_WIDTH / cols;
+  const cellHeight = SCREEN_HEIGHT / rows;
+
+  return images.map((source, index) => {
+    const col = index % cols;
+    const row = Math.floor(index / cols);
+
+    return {
+      source,
+      style: {
+        position: 'absolute' as const,
+        left: col * cellWidth,
+        top: row * cellHeight,
+        width: cellWidth,
+        height: cellHeight,
+      },
+    };
+  });
+};
+
+const generateMasonryLayout = (images: any[]): ImageLayout[] => {
+  const cols = 3;
+  const colWidth = SCREEN_WIDTH / cols;
+  const columnHeights = new Array(cols).fill(0);
+
+  return images.map((source, _index) => {
+    const shortestCol = columnHeights.indexOf(Math.min(...columnHeights));
+    const height = colWidth * (0.7 + Math.random() * 0.6);
+    
+    const layout: ImageLayout = {
+      source,
+      style: {
+        position: 'absolute' as const,
+        left: shortestCol * colWidth,
+        top: columnHeights[shortestCol],
+        width: colWidth,
+        height,
+      },
+    };
+
+    columnHeights[shortestCol] += height;
+    return layout;
+  });
+};
+
+const generateCollageLayout = (images: any[]): ImageLayout[] => {
+  const layouts: ImageLayout[] = [];
+  const minSize = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT) * 0.25;
+  const maxSize = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT) * 0.45;
+
+  images.forEach((source, _index) => {
+    const size = minSize + Math.random() * (maxSize - minSize);
+    const maxX = SCREEN_WIDTH - size;
+    const maxY = SCREEN_HEIGHT - size;
+
+    let attempts = 0;
+    let overlaps = true;
+    let left = 0;
+    let top = 0;
+
+    while (overlaps && attempts < 50) {
+      left = Math.random() * maxX;
+      top = Math.random() * maxY;
+      overlaps = false;
+
+      for (const existing of layouts) {
+        if (
+          left < existing.style.left + existing.style.width &&
+          left + size > existing.style.left &&
+          top < existing.style.top + existing.style.height &&
+          top + size > existing.style.top
+        ) {
+          overlaps = true;
+          break;
+        }
+      }
+
+      attempts++;
+    }
+
+    layouts.push({
+      source,
+      style: {
+        position: 'absolute' as const,
+        left,
+        top,
+        width: size,
+        height: size,
+      },
+    });
+  });
+
+  return layouts;
+};

package/src/presentation/components/OnboardingBackground.tsx

@@ -9,6 +9,7 @@ import { LinearGradient } from "expo-linear-gradient";
 import { Image } from "expo-image";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import { BackgroundVideo } from "./BackgroundVideo";
+import { BackgroundImageCollage } from "./BackgroundImageCollage";
 
 interface OnboardingBackgroundProps {
   currentSlide: OnboardingSlide | undefined;
@@ -35,6 +36,15 @@ export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
       );
     }
 
+    if (currentSlide.backgroundImages && currentSlide.backgroundImages.length > 0) {
+      return (
+        <BackgroundImageCollage
+          images={currentSlide.backgroundImages}
+          layout={currentSlide.backgroundImagesLayout || 'grid'}
+        />
+      );
+    }
+
     if (currentSlide.backgroundImage) {
       return (
         <Image

package/src/presentation/components/OnboardingScreenContent.tsx

@@ -53,7 +53,9 @@ export const OnboardingScreenContent = ({
   });
 
   const hasMedia =
-    !!currentSlide?.backgroundImage || !!currentSlide?.backgroundVideo;
+    !!currentSlide?.backgroundImage || 
+    !!currentSlide?.backgroundVideo ||
+    (!!currentSlide?.backgroundImages && currentSlide.backgroundImages.length > 0);
   const overlayOpacity = currentSlide?.overlayOpacity ?? 0.5;
   const effectivelyUseGradient = useGradient || hasMedia;