@umituz/react-native-onboarding 3.6.9 → 3.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.9",
+  "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

@@ -68,7 +68,9 @@ export {
 export { OnboardingScreen, type OnboardingScreenProps } from "./presentation/screens/OnboardingScreen";
 export { OnboardingHeader, type OnboardingHeaderProps } from "./presentation/components/OnboardingHeader";
 export { OnboardingFooter, type OnboardingFooterProps } from "./presentation/components/OnboardingFooter";
-export { OnboardingThemeProvider, type OnboardingThemeProviderProps, useOnboardingTheme } from "./presentation/providers/OnboardingThemeProvider";
+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
 // Note: TypeScript doesn't allow exporting both a type and a value with the same name

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/OnboardingFooter.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useLocalization } from "@umituz/react-native-localization";
 import { AtomicText } from "@umituz/react-native-design-system";
-import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
 
 export interface OnboardingFooterProps {
   currentIndex: number;
@@ -32,7 +32,9 @@ export const OnboardingFooter = ({
 }: OnboardingFooterProps) => {
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
 
   const buttonText = isLastSlide
     ? getStartedButtonText || t("onboarding.getStarted")

package/src/presentation/components/OnboardingHeader.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
-import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
 
 export interface OnboardingHeaderProps {
   isFirstSlide: boolean;
@@ -22,7 +22,9 @@ export const OnboardingHeader = ({
   skipButtonText,
 }: OnboardingHeaderProps) => {
   const { t } = useLocalization();
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
 
   const skipText = skipButtonText || t("onboarding.skip");
 

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;
 

package/src/presentation/components/OnboardingSlide.tsx

@@ -8,7 +8,7 @@ import { View, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
 import { BaseSlide } from "./BaseSlide";
-import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
 
 export interface OnboardingSlideProps {
   slide: OnboardingSlideType;
@@ -19,7 +19,9 @@ export const OnboardingSlide = ({
   slide,
   variant = "default",
 }: OnboardingSlideProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
 
   const shouldShowIcon = slide.icon && !slide.hideIcon;
   const isEmoji = slide.iconType === 'emoji';

package/src/presentation/components/QuestionSlide.tsx

@@ -10,7 +10,7 @@ import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import { QuestionSlideHeader } from "./QuestionSlideHeader";
 import { QuestionRenderer } from "./QuestionRenderer";
 import { BaseSlide } from "./BaseSlide";
-import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
 import { useLocalization } from "@umituz/react-native-localization";
 
 export interface QuestionSlideProps {
@@ -26,7 +26,9 @@ export const QuestionSlide = ({
   onChange,
   variant: _variant = "default",
 }: QuestionSlideProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
   const { t } = useLocalization();
   const { question } = slide;
 

package/src/presentation/components/QuestionSlideHeader.tsx

@@ -2,16 +2,16 @@ import React from "react";
 import { View, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
-import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
 
 export interface QuestionSlideHeaderProps {
   slide: OnboardingSlide;
 }
 
-export const QuestionSlideHeader = ({
-  slide,
-}: QuestionSlideHeaderProps) => {
-  const { colors } = useOnboardingTheme();
+export const QuestionSlideHeader = ({ slide }: QuestionSlideHeaderProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
   const isEmoji = slide.iconType === 'emoji';
 
   return (

package/src/presentation/components/questions/MultipleChoiceQuestion.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
-import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface MultipleChoiceQuestionProps {
@@ -15,7 +15,9 @@ export const MultipleChoiceQuestion = ({
   value = [],
   onChange,
 }: MultipleChoiceQuestionProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
 
   const handleToggle = (optionId: string) => {
     const newValue = value.includes(optionId)

package/src/presentation/components/questions/RatingQuestion.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
-import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface RatingQuestionProps {
@@ -15,7 +15,9 @@ export const RatingQuestion = ({
   value = 0,
   onChange,
 }: RatingQuestionProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
   const max = question.validation?.max ?? 5;
 
   return (

package/src/presentation/components/questions/SingleChoiceQuestion.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
-import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface SingleChoiceQuestionProps {
@@ -15,7 +15,9 @@ export const SingleChoiceQuestion = ({
   value,
   onChange,
 }: SingleChoiceQuestionProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
 
   const renderOption = (option: QuestionOption) => {
     const isSelected = value === option.id;

package/src/presentation/components/questions/TextInputQuestion.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, TextInput, StyleSheet } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system";
-import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface TextInputQuestionProps {
@@ -15,7 +15,9 @@ export const TextInputQuestion = ({
   value = "",
   onChange,
 }: TextInputQuestionProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
   const { validation } = question;
 
   return (

package/src/presentation/providers/OnboardingProvider.tsx

@@ -0,0 +1,51 @@
+/**
+ * Onboarding Provider
+ * 
+ * Central manager for onboarding theme and configuration.
+ * All values are passed from the main application.
+ */
+
+import React, { createContext, useContext, useMemo } from "react";
+import type { OnboardingTheme, OnboardingColors } from "../types/OnboardingTheme";
+
+interface OnboardingProviderValue {
+  theme: OnboardingTheme;
+}
+
+const OnboardingScope = createContext<OnboardingProviderValue | undefined>(undefined);
+
+export interface OnboardingProviderProps {
+  children: React.ReactNode;
+  useGradient: boolean;
+  colors: OnboardingColors;
+}
+
+export const OnboardingProvider = ({
+  children,
+  useGradient,
+  colors,
+}: OnboardingProviderProps) => {
+  const value = useMemo(
+    () => ({
+      theme: {
+        colors,
+        useGradient,
+      },
+    }),
+    [colors, useGradient]
+  );
+
+  return (
+    <OnboardingScope.Provider value={value}>
+      {children}
+    </OnboardingScope.Provider>
+  );
+};
+
+export const useOnboardingProvider = (): OnboardingProviderValue => {
+  const scope = useContext(OnboardingScope);
+  if (!scope) {
+    throw new Error("useOnboardingProvider must be used within OnboardingProvider");
+  }
+  return scope;
+};

package/src/presentation/screens/OnboardingScreen.tsx

@@ -12,7 +12,8 @@ import { StyleSheet } from "react-native";
 import type { OnboardingOptions } from "../../domain/entities/OnboardingOptions";
 import { useOnboardingScreenState } from "../hooks/useOnboardingScreenState";
 import { OnboardingScreenContent } from "../components/OnboardingScreenContent";
-import { OnboardingThemeProvider } from "../providers/OnboardingThemeProvider";
+import { OnboardingProvider } from "../providers/OnboardingProvider";
+import type { OnboardingColors } from "../types/OnboardingTheme";
 
 export interface OnboardingScreenProps extends OnboardingOptions {
   /**
@@ -52,6 +53,11 @@ export interface OnboardingScreenProps extends OnboardingOptions {
    * When true, shows premium paywall before completing onboarding
    */
   showPaywallOnComplete?: boolean;
+
+  /**
+   * Theme colors for the onboarding (Required to avoid hardcoded values)
+   */
+  themeColors: OnboardingColors;
 }
 
 export const OnboardingScreen = ({
@@ -75,6 +81,7 @@ export const OnboardingScreen = ({
   showPaywallOnComplete = false,
   useGradient: globalUseGradient = false,
   themeVariant = "default",
+  themeColors,
 }: OnboardingScreenProps) => {
   if (__DEV__) {
     console.log("[OnboardingScreen] Rendering with slides:", slides?.length);
@@ -115,7 +122,7 @@ export const OnboardingScreen = ({
   }
 
   return (
-    <OnboardingThemeProvider useGradient={useGradient}>
+    <OnboardingProvider useGradient={useGradient} colors={themeColors}>
       <OnboardingScreenContent
         containerStyle={[styles.container, containerStyle]}
         useGradient={useGradient}
@@ -145,7 +152,7 @@ export const OnboardingScreen = ({
         showPaywallOnComplete={showPaywallOnComplete}
         variant={themeVariant}
       />
-    </OnboardingThemeProvider>
+    </OnboardingProvider>
   );
 };
 

package/src/presentation/types/OnboardingTheme.ts

@@ -0,0 +1,27 @@
+/**
+ * Onboarding Theme Types
+ */
+
+export interface OnboardingColors {
+  iconColor: string;
+  textColor: string;
+  subTextColor: string;
+  buttonBg: string;
+  buttonTextColor: string;
+  progressBarBg: string;
+  progressFillColor: string;
+  dotColor: string;
+  activeDotColor: string;
+  progressTextColor: string;
+  headerButtonBg: string;
+  headerButtonBorder: string;
+  iconBg: string;
+  iconBorder: string;
+  errorColor: string;
+  featureItemBg: string;
+}
+
+export interface OnboardingTheme {
+  colors: OnboardingColors;
+  useGradient: boolean;
+}

package/src/domain/entities/OnboardingTheme.ts

@@ -1,6 +0,0 @@
-/**
- * Onboarding Theme Variant
- *
- * Defines the visual style of the onboarding flow
- */
-export type OnboardingThemeVariant = "default" | "card" | "minimal" | "fullscreen";

package/src/presentation/providers/OnboardingThemeProvider.tsx

@@ -1,103 +0,0 @@
-import React, { createContext, useContext, useMemo } from 'react';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
-
-interface OnboardingColors {
-    iconColor: string;
-    textColor: string;
-    subTextColor: string;
-    buttonBg: string;
-    buttonTextColor: string;
-    progressBarBg: string;
-    progressFillColor: string;
-    dotColor: string;
-    activeDotColor: string;
-    progressTextColor: string;
-    headerButtonBg: string;
-    headerButtonBorder: string;
-    iconBg: string;
-    iconBorder: string;
-    errorColor: string;
-    featureItemBg: string;
-}
-
-interface OnboardingThemeValue {
-    colors: OnboardingColors;
-    useGradient: boolean;
-}
-
-const OnboardingThemeInternal = createContext<OnboardingThemeValue | undefined>(undefined);
-
-export interface OnboardingThemeProviderProps {
-    children: React.ReactNode;
-    useGradient?: boolean;
-}
-
-export const OnboardingThemeProvider = ({
-    children,
-    useGradient = false,
-}: OnboardingThemeProviderProps) => {
-    const tokens = useAppDesignTokens();
-
-    const colors = useMemo<OnboardingColors>(() => {
-        const primaryContent = tokens.colors.onPrimary || "#FFFFFF";
-
-        if (useGradient) {
-            return {
-                iconColor: primaryContent,
-                textColor: primaryContent,
-                subTextColor: primaryContent + "CC",
-                buttonBg: primaryContent,
-                buttonTextColor: tokens.colors.primary,
-                progressBarBg: primaryContent + "40",
-                progressFillColor: primaryContent,
-                dotColor: primaryContent + "66",
-                activeDotColor: primaryContent,
-                progressTextColor: primaryContent + "CC",
-                headerButtonBg: primaryContent + "33",
-                headerButtonBorder: primaryContent + "59",
-                iconBg: primaryContent + "33",
-                iconBorder: primaryContent + "59",
-                errorColor: "#FFCDD2",
-                featureItemBg: primaryContent + "1A",
-            };
-        }
-
-        return {
-            iconColor: tokens.colors.primary,
-            textColor: tokens.colors.textPrimary,
-            subTextColor: tokens.colors.textSecondary,
-            buttonBg: tokens.colors.primary,
-            buttonTextColor: tokens.colors.onPrimary,
-            progressBarBg: tokens.colors.borderLight,
-            progressFillColor: tokens.colors.primary,
-            dotColor: tokens.colors.borderLight,
-            activeDotColor: tokens.colors.primary,
-            progressTextColor: tokens.colors.textSecondary,
-            headerButtonBg: tokens.colors.surface,
-            headerButtonBorder: tokens.colors.borderLight,
-            iconBg: tokens.colors.primary + '15',
-            iconBorder: tokens.colors.primary + '30',
-            errorColor: tokens.colors.error,
-            featureItemBg: tokens.colors.surfaceSecondary || tokens.colors.surfaceVariant || "rgba(0,0,0,0.05)",
-        };
-    }, [tokens, useGradient]);
-
-    const value = useMemo(
-        () => ({ colors, useGradient }),
-        [colors, useGradient]
-    );
-
-    return (
-        <OnboardingThemeInternal.Provider value={value}>
-            {children}
-        </OnboardingThemeInternal.Provider>
-    );
-};
-
-export const useOnboardingTheme = (): OnboardingThemeValue => {
-    const theme = useContext(OnboardingThemeInternal);
-    if (!theme) {
-        throw new Error('useOnboardingTheme must be used within OnboardingThemeProvider');
-    }
-    return theme;
-};