@umituz/react-native-onboarding 2.5.3 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.5.3",
+  "version": "2.6.1",
   "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",
@@ -30,13 +30,15 @@
     "type": "git",
     "url": "https://github.com/umituz/react-native-onboarding"
   },
+  "dependencies": {
+    "@react-native-community/slider": "^4.5.0"
+  },
   "peerDependencies": {
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-atoms": "latest",
-    "@react-native-community/slider": "^4.5.0",
     "expo-linear-gradient": "^15.0.0",
     "lucide-react-native": "^0.344.0",
     "react": ">=18.2.0",
@@ -51,7 +53,6 @@
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-design-system-atoms": "latest",
-    "@react-native-community/slider": "^4.5.0",
     "expo-linear-gradient": "^15.0.7",
     "lucide-react-native": "^0.344.0",
     "react": "^18.2.0",

package/src/presentation/components/QuestionSlide.tsx

@@ -19,15 +19,17 @@ export interface QuestionSlideProps {
   slide: OnboardingSlide;
   value: any;
   onChange: (value: any) => void;
+  useGradient?: boolean;
 }
 
 export const QuestionSlide: React.FC<QuestionSlideProps> = ({
   slide,
   value,
   onChange,
+  useGradient = false,
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(tokens), [tokens]);
+  const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
   const { question } = slide;
 
   if (!question) {
@@ -98,7 +100,7 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
             <AtomicIcon
               name={slide.icon as any}
               customSize={48}
-              customColor={tokens.colors.textPrimary}
+              customColor={useGradient ? "#FFFFFF" : tokens.colors.textPrimary}
             />
           )}
         </View>
@@ -123,7 +125,7 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, useGradient: boolean) =>
   StyleSheet.create({
     content: {
       flexGrow: 1,
@@ -136,31 +138,41 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       alignItems: "center",
       maxWidth: 500,
       width: "100%",
-      // Add background for readability with theme colors
-      backgroundColor: tokens.colors.surface,
+      // Gradient kullanıldığında yarı şeffaf, değilse solid
+      backgroundColor: useGradient
+        ? "rgba(255, 255, 255, 0.15)"
+        : tokens.colors.surface,
       padding: 30,
       borderRadius: 24,
-      borderWidth: 1,
-      borderColor: tokens.colors.borderLight,
+      borderWidth: useGradient ? 0 : 1,
+      borderColor: useGradient ? "transparent" : tokens.colors.borderLight,
       shadowColor: tokens.colors.textPrimary,
       shadowOffset: {
         width: 0,
         height: 4,
       },
-      shadowOpacity: 0.1,
+      shadowOpacity: useGradient ? 0.3 : 0.1,
       shadowRadius: 8,
       elevation: 4,
+      // Gradient için backdrop blur efekti
+      ...(useGradient && {
+        backdropFilter: "blur(10px)",
+      }),
     },
     iconContainer: {
       width: 96,
       height: 96,
       borderRadius: 48,
-      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: 24,
       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: 48,
@@ -168,13 +180,13 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     title: {
       fontSize: 24,
       fontWeight: "bold",
-      color: tokens.colors.textPrimary,
+      color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
       textAlign: "center",
       marginBottom: 12,
     },
     description: {
       fontSize: 15,
-      color: tokens.colors.textSecondary,
+      color: useGradient ? "rgba(255, 255, 255, 0.9)" : tokens.colors.textSecondary,
       textAlign: "center",
       lineHeight: 22,
       marginBottom: 24,
@@ -185,7 +197,7 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     },
     requiredHint: {
       fontSize: 13,
-      color: tokens.colors.textSecondary,
+      color: useGradient ? "rgba(255, 255, 255, 0.8)" : tokens.colors.textSecondary,
       fontStyle: "italic",
       marginTop: 12,
     },

package/src/presentation/components/questions/MultipleChoiceQuestion.tsx

@@ -4,10 +4,9 @@
  * Checkbox style question for multiple selections
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
-import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system-theme";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface MultipleChoiceQuestionProps {
@@ -21,9 +20,6 @@ export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
   value = [],
   onChange,
 }) => {
-  const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(tokens), [tokens]);
-  
   const isEmoji = (icon: string) =>
     /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
 
@@ -61,7 +57,7 @@ export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
               <AtomicIcon
                 name={option.icon as any}
                 customSize={24}
-                customColor={isSelected ? tokens.colors.primary : tokens.colors.textSecondary}
+                customColor={isSelected ? "#FFFFFF" : "rgba(255, 255, 255, 0.8)"}
               />
             )}
           </View>
@@ -71,7 +67,7 @@ export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
         </Text>
         <View style={[styles.checkbox, isSelected && styles.checkboxSelected]}>
           {isSelected && (
-            <AtomicIcon name="Check" customSize={16} customColor={tokens.colors.primary} />
+            <AtomicIcon name="Check" customSize={16} customColor="#FFFFFF" />
           )}
         </View>
       </TouchableOpacity>
@@ -90,59 +86,58 @@ export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-      width: "100%",
-      gap: 12,
-    },
-    option: {
-      flexDirection: "row",
-      alignItems: "center",
-      backgroundColor: withAlpha(tokens.colors.primary, 0.05),
-      borderRadius: 12,
-      padding: 16,
-      borderWidth: 2,
-      borderColor: tokens.colors.borderLight,
-    },
-    optionSelected: {
-      backgroundColor: withAlpha(tokens.colors.primary, 0.1),
-      borderColor: tokens.colors.primary,
-    },
-    optionIcon: {
-      marginRight: 12,
-    },
-    emoji: {
-      fontSize: 24,
-    },
-    optionLabel: {
-      flex: 1,
-      fontSize: 16,
-      color: tokens.colors.textPrimary,
-      fontWeight: "500",
-    },
-    optionLabelSelected: {
-      color: tokens.colors.primary,
-      fontWeight: "600",
-    },
-    checkbox: {
-      width: 24,
-      height: 24,
-      borderRadius: 6,
-      borderWidth: 2,
-      borderColor: tokens.colors.border,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    checkboxSelected: {
-      borderColor: tokens.colors.primary,
-      backgroundColor: withAlpha(tokens.colors.primary, 0.1),
-    },
-    hint: {
-      fontSize: 13,
-      color: tokens.colors.textSecondary,
-      textAlign: "center",
-      marginTop: 4,
-    },
-  });
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    gap: 12,
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    borderRadius: 12,
+    padding: 16,
+    borderWidth: 2,
+    borderColor: "rgba(255, 255, 255, 0.2)",
+  },
+  optionSelected: {
+    backgroundColor: "rgba(255, 255, 255, 0.25)",
+    borderColor: "rgba(255, 255, 255, 0.5)",
+  },
+  optionIcon: {
+    marginRight: 12,
+  },
+  emoji: {
+    fontSize: 24,
+  },
+  optionLabel: {
+    flex: 1,
+    fontSize: 16,
+    color: "rgba(255, 255, 255, 0.9)",
+    fontWeight: "500",
+  },
+  optionLabelSelected: {
+    color: "#FFFFFF",
+    fontWeight: "600",
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    borderWidth: 2,
+    borderColor: "rgba(255, 255, 255, 0.5)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  checkboxSelected: {
+    borderColor: "#FFFFFF",
+    backgroundColor: "rgba(255, 255, 255, 0.3)",
+  },
+  hint: {
+    fontSize: 13,
+    color: "rgba(255, 255, 255, 0.7)",
+    textAlign: "center",
+    marginTop: 4,
+  },
+});
 

package/src/presentation/components/questions/SingleChoiceQuestion.tsx

@@ -4,10 +4,9 @@
  * Radio button style question for single selection
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
-import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system-theme";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface SingleChoiceQuestionProps {
@@ -21,9 +20,6 @@ export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
   value,
   onChange,
 }) => {
-  const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(tokens), [tokens]);
-  
   const isEmoji = (icon: string) =>
     /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
 
@@ -45,7 +41,7 @@ export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
               <AtomicIcon
                 name={option.icon as any}
                 customSize={24}
-                customColor={isSelected ? tokens.colors.primary : tokens.colors.textSecondary}
+                customColor={isSelected ? "#FFFFFF" : "rgba(255, 255, 255, 0.8)"}
               />
             )}
           </View>
@@ -67,58 +63,57 @@ export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-      width: "100%",
-      gap: 12,
-    },
-    option: {
-      flexDirection: "row",
-      alignItems: "center",
-      backgroundColor: withAlpha(tokens.colors.primary, 0.05),
-      borderRadius: 12,
-      padding: 16,
-      borderWidth: 2,
-      borderColor: tokens.colors.borderLight,
-    },
-    optionSelected: {
-      backgroundColor: withAlpha(tokens.colors.primary, 0.1),
-      borderColor: tokens.colors.primary,
-    },
-    optionIcon: {
-      marginRight: 12,
-    },
-    emoji: {
-      fontSize: 24,
-    },
-    optionLabel: {
-      flex: 1,
-      fontSize: 16,
-      color: tokens.colors.textPrimary,
-      fontWeight: "500",
-    },
-    optionLabelSelected: {
-      color: tokens.colors.primary,
-      fontWeight: "600",
-    },
-    radio: {
-      width: 24,
-      height: 24,
-      borderRadius: 12,
-      borderWidth: 2,
-      borderColor: tokens.colors.border,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    radioSelected: {
-      borderColor: tokens.colors.primary,
-    },
-    radioInner: {
-      width: 12,
-      height: 12,
-      borderRadius: 6,
-      backgroundColor: tokens.colors.primary,
-    },
-  });
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    gap: 12,
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    borderRadius: 12,
+    padding: 16,
+    borderWidth: 2,
+    borderColor: "rgba(255, 255, 255, 0.2)",
+  },
+  optionSelected: {
+    backgroundColor: "rgba(255, 255, 255, 0.25)",
+    borderColor: "rgba(255, 255, 255, 0.5)",
+  },
+  optionIcon: {
+    marginRight: 12,
+  },
+  emoji: {
+    fontSize: 24,
+  },
+  optionLabel: {
+    flex: 1,
+    fontSize: 16,
+    color: "rgba(255, 255, 255, 0.9)",
+    fontWeight: "500",
+  },
+  optionLabelSelected: {
+    color: "#FFFFFF",
+    fontWeight: "600",
+  },
+  radio: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: "rgba(255, 255, 255, 0.5)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  radioSelected: {
+    borderColor: "#FFFFFF",
+  },
+  radioInner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: "#FFFFFF",
+  },
+});
 

package/src/presentation/screens/OnboardingScreen.tsx

@@ -229,6 +229,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
             slide={currentSlide}
             value={currentAnswer}
             onChange={setCurrentAnswer}
+            useGradient={useGradient}
           />
         ) : (
           <OnboardingSlideComponent slide={currentSlide} />