@umituz/react-native-onboarding 2.6.2 → 2.6.3

package/package.json

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

@@ -85,5 +85,11 @@ export interface OnboardingOptions {
    * Show paywall modal on onboarding completion (default: false)
    */
   showPaywallOnComplete?: boolean;
+
+  /**
+   * Use gradient background for all slides (default: false)
+   * When true, all slides will use gradient backgrounds if available
+   */
+  useGradient?: boolean;
 }
 

package/src/infrastructure/utils/gradientUtils.ts

@@ -10,13 +10,23 @@ 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): boolean {
+export function shouldUseGradient(
+  slide: OnboardingSlide | undefined,
+  globalUseGradient?: boolean
+): boolean {
   if (!slide) {
     return false;
   }
 
+  // If global useGradient is true, use gradient if slide has gradient defined
+  if (globalUseGradient === true) {
+    return slide.gradient !== undefined && slide.gradient.length > 0;
+  }
+
+  // Otherwise, check slide's own useGradient prop
   return (
     slide.useGradient === true &&
     slide.gradient !== undefined &&

package/src/presentation/screens/OnboardingScreen.tsx

@@ -88,6 +88,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   renderSlide,
   onUpgrade,
   showPaywallOnComplete = false,
+  useGradient: globalUseGradient = false,
 }) => {
   const insets = useSafeAreaInsets();
   const tokens = useAppDesignTokens();
@@ -175,7 +176,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   };
 
   // Check if gradient should be used
-  const useGradient = shouldUseGradient(currentSlide);
+  const useGradient = shouldUseGradient(currentSlide, globalUseGradient);
 
   // Validate answer using service
   const isAnswerValid = useMemo(() => {