@umituz/react-native-onboarding 3.6.23 → 3.6.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.23",
+  "version": "3.6.24",
   "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",
@@ -33,7 +33,6 @@
     "@umituz/react-native-localization": ">=1.0.0",
     "@umituz/react-native-storage": ">=2.6.0",
     "expo-image": ">=2.0.0",
-    "expo-linear-gradient": ">=13.0.0",
     "expo-video": ">=1.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
@@ -56,7 +55,6 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "expo-image": "~2.0.0",
-    "expo-linear-gradient": "^15.0.7",
     "expo-video": "~2.0.0",
     "react": "19.1.0",
     "react-native": "0.81.5",

package/src/domain/entities/OnboardingSlide.ts

@@ -62,18 +62,16 @@ export interface OnboardingSlide {
   contentPosition?: ContentPosition;
 
   /**
-   * Gradient colors for the slide background (optional)
-   * [startColor, endColor] or [color1, color2, color3] for multi-stop gradients
-   * Only used if useGradient is true
+   * Background color for the slide background (optional)
+   * Only used if useCustomBackground is true
    */
-  gradient?: string[];
+  backgroundColor?: string;
 
   /**
-   * Use gradient background instead of theme colors (default: false)
-   * If true and gradient is provided, gradient will be used
-   * If false or gradient not provided, theme background colors will be used
+   * Use custom background color instead of theme defaults (default: false)
+   * If true and backgroundColor is provided, it will be used
    */
-  useGradient?: boolean;
+  useCustomBackground?: boolean;
 
   /**
    * Optional image URL (alternative to icon)

package/src/infrastructure/utils/backgroundUtils.ts

@@ -0,0 +1,38 @@
+/**
+ * Background Utilities
+ *
+ * Utility functions for background-related operations
+ * Follows Single Responsibility Principle
+ */
+
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+
+/**
+ * Check if slide should use custom background or overlay
+ * Indicates that we are not using the default theme background.
+ * 
+ * @param slide - The slide to check
+ * @param globalUseCustomBackground - Global option from OnboardingOptions
+ * @returns true if custom background/media should be used, false otherwise
+ */
+export function shouldUseCustomBackground(
+  slide: OnboardingSlide | undefined,
+  globalUseCustomBackground?: boolean
+): boolean {
+  if (!slide) {
+    return false;
+  }
+
+  // If there is background media, we always treat it as custom (needs overlay for readability)
+  if (slide.backgroundImage || slide.backgroundVideo || (slide.backgroundImages && slide.backgroundImages.length > 0)) {
+    return true;
+  }
+
+  // If global custom background is enabled, use it if slide has color defined
+  if (globalUseCustomBackground === true) {
+    return !!slide.backgroundColor;
+  }
+
+  // Otherwise, check slide's own useCustomBackground prop
+  return slide.useCustomBackground === true && !!slide.backgroundColor;
+}

package/src/presentation/components/OnboardingBackground.tsx

@@ -1,11 +1,11 @@
 /**
  * Onboarding Background Component
- * Handles rendering of video, image or gradient backgrounds
+ * Handles rendering of video, image or solid backgrounds
  */
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
+
 import { Image } from "expo-image";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import { BackgroundVideo } from "./BackgroundVideo";
@@ -13,15 +13,15 @@ import { BackgroundImageCollage } from "./BackgroundImageCollage";
 
 interface OnboardingBackgroundProps {
   currentSlide: OnboardingSlide | undefined;
-  useGradient: boolean;
-  effectivelyUseGradient: boolean;
+  useCustomBackground: boolean;
+  showOverlay: boolean;
   overlayOpacity: number;
 }
 
 export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
   currentSlide,
-  useGradient,
-  effectivelyUseGradient,
+  useCustomBackground,
+  showOverlay,
   overlayOpacity,
 }) => {
   if (!currentSlide) return null;
@@ -59,13 +59,13 @@ export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
       );
     }
 
-    if (useGradient && currentSlide.gradient) {
+    if (useCustomBackground && currentSlide.backgroundColor) {
       return (
-        <LinearGradient
-          colors={currentSlide.gradient as [string, string, ...string[]]}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={StyleSheet.absoluteFill}
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor: currentSlide.backgroundColor }
+          ]}
         />
       );
     }
@@ -80,7 +80,7 @@ export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
         style={[
           StyleSheet.absoluteFill,
           {
-            backgroundColor: effectivelyUseGradient
+            backgroundColor: showOverlay
               ? `rgba(0,0,0,${overlayOpacity})`
               : "transparent",
           },

package/src/presentation/hooks/useOnboardingContainerStyle.ts

@@ -8,7 +8,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 
 export interface UseOnboardingContainerStyleProps {
-  useGradient: boolean;
+  useCustomBackground: boolean;
 }
 
 export interface UseOnboardingContainerStyleReturn {
@@ -16,7 +16,7 @@ export interface UseOnboardingContainerStyleReturn {
 }
 
 export function useOnboardingContainerStyle({
-  useGradient,
+  useCustomBackground,
 }: UseOnboardingContainerStyleProps): UseOnboardingContainerStyleReturn {
   const insets = useSafeAreaInsets();
   const tokens = useAppDesignTokens();
@@ -25,10 +25,10 @@ export function useOnboardingContainerStyle({
     () => [
       {
         paddingTop: insets.top,
-        backgroundColor: useGradient ? "transparent" : tokens.colors.backgroundPrimary,
+        backgroundColor: useCustomBackground ? "transparent" : tokens.colors.backgroundPrimary,
       },
     ],
-    [insets.top, useGradient, tokens.colors.backgroundPrimary],
+    [insets.top, useCustomBackground, tokens.colors.backgroundPrimary],
   );
 
   return {

package/src/presentation/hooks/useOnboardingScreenState.ts

@@ -12,14 +12,14 @@ import { useOnboardingContainerStyle } from "./useOnboardingContainerStyle";
 import { useOnboardingScreenHandlers } from "./useOnboardingScreenHandlers";
 import { SlideManager } from "../../infrastructure/services/SlideManager";
 import { ValidationManager } from "../../infrastructure/services/ValidationManager";
-import { shouldUseGradient } from "../../infrastructure/utils/gradientUtils";
+import { shouldUseCustomBackground } from "../../infrastructure/utils/backgroundUtils";
 
 export interface UseOnboardingScreenStateProps {
   slides: OnboardingSlide[] | undefined;
   storageKey?: string;
   onComplete?: () => void | Promise<void>;
   onSkip?: () => void | Promise<void>;
-  globalUseGradient?: boolean;
+  globalUseCustomBackground?: boolean;
 }
 
 export interface UseOnboardingScreenStateReturn {
@@ -30,7 +30,7 @@ export interface UseOnboardingScreenStateReturn {
   isLastSlide: boolean;
   currentAnswer: unknown;
   isAnswerValid: boolean;
-  useGradient: boolean;
+  useCustomBackground: boolean;
   containerStyle: unknown;
   handleNext: () => Promise<void>;
   handlePrevious: () => void;
@@ -43,7 +43,7 @@ export function useOnboardingScreenState({
   storageKey,
   onComplete,
   onSkip,
-  globalUseGradient = false,
+  globalUseCustomBackground = false,
 }: UseOnboardingScreenStateProps): UseOnboardingScreenStateReturn {
   const onboardingStore = useOnboarding();
 
@@ -106,7 +106,7 @@ export function useOnboardingScreenState({
     }
   );
 
-  const useGradient = shouldUseGradient(currentSlide, globalUseGradient);
+  const useCustomBackground = shouldUseCustomBackground(currentSlide, globalUseCustomBackground);
 
   const isAnswerValid = useMemo(() => {
     if (!currentSlide?.question) {
@@ -118,7 +118,7 @@ export function useOnboardingScreenState({
     );
   }, [currentSlide, currentAnswer]);
 
-  const { containerStyle } = useOnboardingContainerStyle({ useGradient });
+  const { containerStyle } = useOnboardingContainerStyle({ useCustomBackground });
 
   useEffect(() => {
     return () => {
@@ -136,7 +136,7 @@ export function useOnboardingScreenState({
     isLastSlide,
     currentAnswer,
     isAnswerValid,
-    useGradient,
+    useCustomBackground,
     containerStyle,
     handleNext,
     handlePrevious,

package/src/infrastructure/utils/gradientUtils.ts

@@ -1,41 +0,0 @@
-/**
- * Gradient Utilities
- *
- * Utility functions for gradient-related operations
- * Follows Single Responsibility Principle
- */
-
-import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
-
-/**
- * Check if slide should use gradient background
- * @param slide - The slide to check
- * @param globalUseGradient - Global useGradient option from OnboardingOptions
- * @returns true if gradient should be used, false otherwise
- */
-export function shouldUseGradient(
-  slide: OnboardingSlide | undefined,
-  globalUseGradient?: boolean
-): boolean {
-  if (!slide) {
-    return false;
-  }
-
-  // If there is background media, we always treat it as "dark mode" for accessibility (white text)
-  if (slide.backgroundImage || slide.backgroundVideo) {
-    return true;
-  }
-
-  // If global useGradient is true, use gradient if slide has gradient defined
-  if (globalUseGradient === true) {
-    return !!slide.gradient && slide.gradient.length > 0;
-  }
-
-  // Otherwise, check slide's own useGradient prop
-  return (
-    slide.useGradient === true &&
-    !!slide.gradient &&
-    slide.gradient.length > 0
-  );
-}
-