@umituz/react-native-onboarding 2.6.1 → 2.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.6.1",
+  "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/components/QuestionSlide.tsx

@@ -138,10 +138,8 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, useGradient: b
       alignItems: "center",
       maxWidth: 500,
       width: "100%",
-      // Gradient kullanıldığında yarı şeffaf, değilse solid
-      backgroundColor: useGradient
-        ? "rgba(255, 255, 255, 0.15)"
-        : tokens.colors.surface,
+      // Gradient kullanıldığında tamamen şeffaf, değilse solid
+      backgroundColor: useGradient ? "transparent" : tokens.colors.surface,
       padding: 30,
       borderRadius: 24,
       borderWidth: useGradient ? 0 : 1,
@@ -151,13 +149,9 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, useGradient: b
         width: 0,
         height: 4,
       },
-      shadowOpacity: useGradient ? 0.3 : 0.1,
+      shadowOpacity: useGradient ? 0 : 0.1,
       shadowRadius: 8,
-      elevation: 4,
-      // Gradient için backdrop blur efekti
-      ...(useGradient && {
-        backdropFilter: "blur(10px)",
-      }),
+      elevation: useGradient ? 0 : 4,
     },
     iconContainer: {
       width: 96,

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(() => {