@umituz/react-native-onboarding 2.5.0 → 2.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "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/infrastructure/services/OnboardingSlideService.ts

@@ -19,9 +19,13 @@ export class OnboardingSlideService {
    * @returns Filtered slides that should be shown
    */
   static filterSlides(
-    slides: OnboardingSlide[],
+    slides: OnboardingSlide[] | undefined,
     userData: OnboardingUserData,
   ): OnboardingSlide[] {
+    // Safety check: return empty array if slides is undefined or not an array
+    if (!slides || !Array.isArray(slides)) {
+      return [];
+    }
     return slides.filter((slide) => {
       if (slide.skipIf) {
         return !slide.skipIf(userData.answers);

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

@@ -4,9 +4,10 @@
  * Radio button style question for single selection
  */
 
-import React from "react";
+import React, { useMemo } 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 {
@@ -20,6 +21,9 @@ 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);
 
@@ -41,7 +45,7 @@ export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
               <AtomicIcon
                 name={option.icon as any}
                 customSize={24}
-                customColor={isSelected ? "#FFFFFF" : "rgba(255, 255, 255, 0.8)"}
+                customColor={isSelected ? tokens.colors.primary : tokens.colors.textSecondary}
               />
             )}
           </View>
@@ -63,57 +67,58 @@ export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
   );
 };
 
-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",
-  },
-});
+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,
+    },
+  });
 

package/src/presentation/screens/OnboardingScreen.tsx

@@ -96,6 +96,10 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
 
   // Filter slides using service
   const filteredSlides = useMemo(() => {
+    // Safety check: if slides is undefined or empty, return empty array
+    if (!slides || !Array.isArray(slides) || slides.length === 0) {
+      return [];
+    }
     const userData = onboardingStore.getUserData();
     return OnboardingSlideService.filterSlides(slides, userData);
   }, [slides, onboardingStore]);