@umituz/react-native-onboarding 2.6.2 → 2.6.4

package/package.json

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

@@ -91,36 +91,71 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
       contentContainerStyle={styles.content}
       showsVerticalScrollIndicator={false}
     >
-      <View style={styles.slideContent}>
-        {/* Icon */}
-        <View style={styles.iconContainer}>
-          {isEmoji ? (
-            <Text style={styles.icon}>{slide.icon}</Text>
-          ) : (
-            <AtomicIcon
-              name={slide.icon as any}
-              customSize={48}
-              customColor={useGradient ? "#FFFFFF" : tokens.colors.textPrimary}
-            />
+      {useGradient ? (
+        // Gradient kullanıldığında card olmadan direkt içerik
+        <>
+          {/* Icon */}
+          <View style={styles.iconContainer}>
+            {isEmoji ? (
+              <Text style={styles.icon}>{slide.icon}</Text>
+            ) : (
+              <AtomicIcon
+                name={slide.icon as any}
+                customSize={48}
+                customColor="#FFFFFF"
+              />
+            )}
+          </View>
+
+          {/* Title */}
+          <Text style={styles.title}>{slide.title}</Text>
+
+          {/* Description */}
+          {slide.description && (
+            <Text style={styles.description}>{slide.description}</Text>
           )}
-        </View>
 
-        {/* Title */}
-        <Text style={styles.title}>{slide.title}</Text>
+          {/* Question */}
+          <View style={styles.questionContainer}>{renderQuestion()}</View>
 
-        {/* Description */}
-        {slide.description && (
-          <Text style={styles.description}>{slide.description}</Text>
-        )}
+          {/* Validation hint */}
+          {question.validation?.required && !value && (
+            <Text style={styles.requiredHint}>* This field is required</Text>
+          )}
+        </>
+      ) : (
+        // Normal modda card ile
+        <View style={styles.slideContent}>
+          {/* Icon */}
+          <View style={styles.iconContainer}>
+            {isEmoji ? (
+              <Text style={styles.icon}>{slide.icon}</Text>
+            ) : (
+              <AtomicIcon
+                name={slide.icon as any}
+                customSize={48}
+                customColor={tokens.colors.textPrimary}
+              />
+            )}
+          </View>
 
-        {/* Question */}
-        <View style={styles.questionContainer}>{renderQuestion()}</View>
+          {/* Title */}
+          <Text style={styles.title}>{slide.title}</Text>
 
-        {/* Validation hint */}
-        {question.validation?.required && !value && (
-          <Text style={styles.requiredHint}>* This field is required</Text>
-        )}
-      </View>
+          {/* Description */}
+          {slide.description && (
+            <Text style={styles.description}>{slide.description}</Text>
+          )}
+
+          {/* Question */}
+          <View style={styles.questionContainer}>{renderQuestion()}</View>
+
+          {/* Validation hint */}
+          {question.validation?.required && !value && (
+            <Text style={styles.requiredHint}>* This field is required</Text>
+          )}
+        </View>
+      )}
     </ScrollView>
   );
 };
@@ -138,20 +173,19 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, useGradient: b
       alignItems: "center",
       maxWidth: 500,
       width: "100%",
-      // Gradient kullanıldığında tamamen şeffaf, değilse solid
-      backgroundColor: useGradient ? "transparent" : tokens.colors.surface,
+      backgroundColor: tokens.colors.surface,
       padding: 30,
       borderRadius: 24,
-      borderWidth: useGradient ? 0 : 1,
-      borderColor: useGradient ? "transparent" : tokens.colors.borderLight,
+      borderWidth: 1,
+      borderColor: tokens.colors.borderLight,
       shadowColor: tokens.colors.textPrimary,
       shadowOffset: {
         width: 0,
         height: 4,
       },
-      shadowOpacity: useGradient ? 0 : 0.1,
+      shadowOpacity: 0.1,
       shadowRadius: 8,
-      elevation: useGradient ? 0 : 4,
+      elevation: 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(() => {