@umituz/react-native-onboarding 3.6.23 → 3.6.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.23",
+  "version": "3.6.25",
   "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/OnboardingOptions.ts

@@ -87,10 +87,10 @@ export interface OnboardingOptions {
   showPaywallOnComplete?: boolean;
 
   /**
-   * Use gradient background for all slides (default: false)
-   * When true, all slides will use gradient backgrounds if available
+   * Use custom background for all slides (default: false)
+   * When true, all slides will use custom backgrounds if available
    */
-  useGradient?: boolean;
+  useCustomBackground?: boolean;
 
   /**
    * Visual theme variant (default: "default")

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/components/OnboardingScreenContent.tsx

@@ -16,7 +16,7 @@ import type { OnboardingScreenContentProps } from "../types/OnboardingProps";
 
 export const OnboardingScreenContent = ({
   containerStyle,
-  useGradient,
+  useCustomBackground,
   currentSlide,
   isFirstSlide,
   isLastSlide,
@@ -57,7 +57,7 @@ export const OnboardingScreenContent = ({
     !!currentSlide?.backgroundVideo ||
     (!!currentSlide?.backgroundImages && currentSlide.backgroundImages.length > 0);
   const overlayOpacity = currentSlide?.overlayOpacity ?? 0.5;
-  const effectivelyUseGradient = useGradient || hasMedia;
+  const showOverlay = useCustomBackground || hasMedia;
 
   return (
     <View
@@ -66,7 +66,7 @@ export const OnboardingScreenContent = ({
     >
       <StatusBar
         barStyle={
-          themeMode === "dark" || effectivelyUseGradient
+          themeMode === "dark" || showOverlay
             ? "light-content"
             : "dark-content"
         }
@@ -74,8 +74,8 @@ export const OnboardingScreenContent = ({
 
       <OnboardingBackground
         currentSlide={currentSlide}
-        useGradient={useGradient}
-        effectivelyUseGradient={effectivelyUseGradient}
+        useCustomBackground={useCustomBackground}
+        showOverlay={showOverlay}
         overlayOpacity={overlayOpacity}
       />
 

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/presentation/providers/OnboardingProvider.tsx

@@ -16,23 +16,23 @@ const OnboardingScope = createContext<OnboardingProviderValue | undefined>(undef
 
 export interface OnboardingProviderProps {
   children: React.ReactNode;
-  useGradient: boolean;
+  useCustomBackground: boolean;
   colors: OnboardingColors;
 }
 
 export const OnboardingProvider = ({
   children,
-  useGradient,
+  useCustomBackground,
   colors,
 }: OnboardingProviderProps) => {
   const value = useMemo(
     () => ({
       theme: {
         colors,
-        useGradient,
+        useCustomBackground,
       },
     }),
-    [colors, useGradient]
+    [colors, useCustomBackground]
   );
 
   return (

package/src/presentation/screens/OnboardingScreen.tsx

@@ -80,7 +80,7 @@ export const OnboardingScreen = ({
   renderSlide,
   onUpgrade,
   showPaywallOnComplete = false,
-  useGradient: globalUseGradient = false,
+  useCustomBackground: globalUseCustomBackground = false,
   themeVariant = "default",
   themeColors: providedThemeColors,
 }: OnboardingScreenProps) => {
@@ -121,7 +121,7 @@ export const OnboardingScreen = ({
     isLastSlide,
     currentAnswer,
     isAnswerValid,
-    useGradient,
+    useCustomBackground,
     containerStyle,
     handleNext,
     handlePrevious,
@@ -132,7 +132,7 @@ export const OnboardingScreen = ({
     storageKey,
     onComplete,
     onSkip,
-    globalUseGradient,
+    globalUseCustomBackground,
   });
 
   if (__DEV__) {
@@ -148,10 +148,10 @@ export const OnboardingScreen = ({
   }
 
   return (
-    <OnboardingProvider useGradient={useGradient} colors={themeColors}>
+    <OnboardingProvider useCustomBackground={useCustomBackground} colors={themeColors}>
       <OnboardingScreenContent
         containerStyle={[styles.container, containerStyle]}
-        useGradient={useGradient}
+        useCustomBackground={useCustomBackground}
         currentSlide={currentSlide}
         isFirstSlide={isFirstSlide}
         isLastSlide={isLastSlide}

package/src/presentation/types/OnboardingProps.ts

@@ -6,7 +6,7 @@ import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 
 export interface OnboardingScreenContentProps {
   containerStyle?: any;
-  useGradient: boolean;
+  useCustomBackground: boolean;
   currentSlide: OnboardingSlide | undefined;
   isFirstSlide: boolean;
   isLastSlide: boolean;

package/src/presentation/types/OnboardingTheme.ts

@@ -23,5 +23,5 @@ export interface OnboardingColors {
 
 export interface OnboardingTheme {
   colors: OnboardingColors;
-  useGradient: boolean;
+  useCustomBackground: boolean;
 }

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
-  );
-}
-