@umituz/react-native-onboarding 2.6.3 → 2.6.5

package/package.json

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

@@ -12,11 +12,12 @@ import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entiti
 
 export interface OnboardingSlideProps {
   slide: OnboardingSlideType;
+  useGradient?: boolean;
 }
 
-export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide }) => {
+export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide, useGradient = false }) => {
   const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(tokens), [tokens]);
+  const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
 
   // Check if icon is an emoji (contains emoji characters) or Lucide icon name
   const isEmoji = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(slide.icon);
@@ -25,8 +26,37 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide }) => {
   const IconComponent = !isEmoji ? (LucideIcons as any)[slide.icon] : null;
 
   return (
-    <View style={styles.container}>
-      <View style={styles.content}>
+    <ScrollView
+      contentContainerStyle={styles.content}
+      showsVerticalScrollIndicator={false}
+    >
+      {useGradient ? (
+        // Gradient kullanıldığında card olmadan direkt içerik
+        <>
+          <View style={styles.iconContainer}>
+            {isEmoji ? (
+              <Text style={styles.icon}>{slide.icon}</Text>
+            ) : IconComponent ? (
+              <IconComponent size={60} color="#FFFFFF" />
+            ) : (
+              <Text style={styles.icon}>📱</Text>
+            )}
+          </View>
+          <Text style={styles.title}>{slide.title}</Text>
+          <Text style={styles.description}>{slide.description}</Text>
+          {slide.features && slide.features.length > 0 && (
+            <View style={styles.featuresContainer}>
+              {slide.features.map((feature, index) => (
+                <View key={index} style={styles.featureItem}>
+                  <Text style={styles.featureBullet}>•</Text>
+                  <Text style={styles.featureText}>{feature}</Text>
+                </View>
+              ))}
+            </View>
+          )}
+        </>
+      ) : (
+        // Normal modda card ile
         <View style={styles.slideContent}>
           <View style={styles.iconContainer}>
             {isEmoji ? (
@@ -50,18 +80,15 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide }) => {
             </View>
           )}
         </View>
-      </View>
-    </View>
+      )}
+    </ScrollView>
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, useGradient: boolean) =>
   StyleSheet.create({
-    container: {
-      flex: 1,
-    },
     content: {
-      flex: 1,
+      flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
       paddingHorizontal: 30,
@@ -71,7 +98,6 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       alignItems: "center",
       maxWidth: 400,
       width: "100%",
-      // Add background for readability with theme colors
       backgroundColor: tokens.colors.surface,
       padding: 30,
       borderRadius: 24,
@@ -90,12 +116,16 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       width: 120,
       height: 120,
       borderRadius: 60,
-      backgroundColor: withAlpha(tokens.colors.primary, 0.2),
+      backgroundColor: useGradient
+        ? "rgba(255, 255, 255, 0.25)"
+        : withAlpha(tokens.colors.primary, 0.2),
       alignItems: "center",
       justifyContent: "center",
       marginBottom: 40,
       borderWidth: 2,
-      borderColor: withAlpha(tokens.colors.primary, 0.4),
+      borderColor: useGradient
+        ? "rgba(255, 255, 255, 0.4)"
+        : withAlpha(tokens.colors.primary, 0.4),
     },
     icon: {
       fontSize: 60,
@@ -103,13 +133,13 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     title: {
       fontSize: 28,
       fontWeight: "bold",
-      color: tokens.colors.textPrimary,
+      color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
       textAlign: "center",
       marginBottom: 16,
     },
     description: {
       fontSize: 16,
-      color: tokens.colors.textSecondary,
+      color: useGradient ? "rgba(255, 255, 255, 0.9)" : tokens.colors.textSecondary,
       textAlign: "center",
       lineHeight: 24,
       marginBottom: 20,
@@ -124,7 +154,7 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       marginBottom: 12,
     },
     featureBullet: {
-      color: tokens.colors.primary,
+      color: useGradient ? "#FFFFFF" : tokens.colors.primary,
       fontSize: 20,
       marginRight: 12,
       marginTop: 2,
@@ -132,7 +162,7 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     featureText: {
       flex: 1,
       fontSize: 15,
-      color: tokens.colors.textSecondary,
+      color: useGradient ? "rgba(255, 255, 255, 0.9)" : tokens.colors.textSecondary,
       lineHeight: 22,
     },
   });

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

@@ -233,7 +233,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
             useGradient={useGradient}
           />
         ) : (
-          <OnboardingSlideComponent slide={currentSlide} />
+          <OnboardingSlideComponent slide={currentSlide} useGradient={useGradient} />
         )
       )}
       {renderFooter ? (