@umituz/react-native-onboarding 3.5.6 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.5.6",
+  "version": "3.6.0",
   "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",
@@ -72,4 +72,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/infrastructure/storage/OnboardingStore.ts

@@ -5,6 +5,7 @@
  * Uses @umituz/react-native-storage for persistence
  */
 
+import { useMemo } from "react";
 import { create, StoreApi } from "zustand";
 import type { OnboardingStoreState } from "./OnboardingStoreState";
 import { initialOnboardingState } from "./OnboardingStoreState";
@@ -51,15 +52,17 @@ export const useOnboardingStore = create<OnboardingStore>((set: StoreApi<Onboard
 
 /**
  * Hook for accessing onboarding state
+ * Memoized to prevent unnecessary re-renders in consumer components
  */
 export const useOnboarding = () => {
   const store = useOnboardingStore();
   const setState = store.setState;
-  const getState = () => store;
-  const actions = createOnboardingStoreActions(setState, getState);
-  const selectors = createOnboardingStoreSelectors(getState);
+  const getState = store.getState;
 
-  return {
+  const actions = useMemo(() => createOnboardingStoreActions(setState, getState), [setState, getState]);
+  const selectors = useMemo(() => createOnboardingStoreSelectors(getState), [getState]);
+
+  return useMemo(() => ({
     // State
     isOnboardingComplete: store.isOnboardingComplete,
     currentStep: store.currentStep,
@@ -81,6 +84,6 @@ export const useOnboarding = () => {
     // Selectors
     getAnswer: selectors.getAnswer,
     getUserData: selectors.getUserData,
-  };
+  }), [store, actions, selectors]);
 };
 

package/src/presentation/components/QuestionSlide.tsx

@@ -11,6 +11,7 @@ import { QuestionSlideHeader } from "./QuestionSlideHeader";
 import { QuestionRenderer } from "./QuestionRenderer";
 import { BaseSlide } from "./BaseSlide";
 import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
+import { useLocalization } from "@umituz/react-native-localization";
 
 export interface QuestionSlideProps {
   slide: OnboardingSlide;
@@ -26,6 +27,7 @@ export const QuestionSlide = ({
   variant: _variant = "default",
 }: QuestionSlideProps) => {
   const { colors } = useOnboardingTheme();
+  const { t } = useLocalization();
   const { question } = slide;
 
   if (!question) return null;
@@ -43,7 +45,7 @@ export const QuestionSlide = ({
           type="labelSmall"
           style={[styles.requiredHint, { color: colors.errorColor }]}
         >
-          * This field is required
+          {t("onboarding.fieldRequired")}
         </AtomicText>
       )}
     </BaseSlide>

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

@@ -29,7 +29,6 @@ export const MultipleChoiceQuestion = ({
   };
   const renderOption = (option: QuestionOption) => {
     const isSelected = value.includes(option.id);
-    const textColor = isSelected ? colors.textColor : colors.subTextColor;
     const isEmoji = option.iconType === 'emoji';
 
     return (
@@ -40,21 +39,29 @@ export const MultipleChoiceQuestion = ({
           {
             backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
             borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
+            borderWidth: isSelected ? 2 : 1,
           }
         ]}
         onPress={() => handleToggle(option.id)}
-        activeOpacity={0.7}
+        activeOpacity={0.8}
       >
         {option.icon && (
-          <View style={styles.optionIcon}>
+          <View style={[
+            styles.optionIcon,
+            { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
+          ]}>
             {isEmoji ? (
               <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
             ) : (
-              <AtomicIcon name={option.icon as any} customSize={24} customColor={textColor} />
+              <AtomicIcon
+                name={option.icon as any}
+                customSize={20}
+                customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
+              />
             )}
           </View>
         )}
-        <AtomicText type="bodyLarge" style={[styles.optionLabel, { color: textColor, fontWeight: isSelected ? '700' : '500' }]}>
+        <AtomicText type="bodyLarge" style={[styles.optionLabel, { color: isSelected ? colors.textColor : colors.subTextColor, fontWeight: isSelected ? '700' : '500' }]}>
           {option.label}
         </AtomicText>
         <View style={[
@@ -93,15 +100,21 @@ const styles = StyleSheet.create({
   option: {
     flexDirection: "row",
     alignItems: "center",
-    borderRadius: 16,
+    borderRadius: 20,
     padding: 16,
-    borderWidth: 2,
+    marginBottom: 8,
   },
   optionIcon: {
-    marginRight: 12,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
   },
   optionLabel: {
     flex: 1,
+    fontSize: 16,
   },
   checkbox: {
     width: 24,

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

@@ -24,19 +24,19 @@ export const RatingQuestion = ({
         {Array.from({ length: max }).map((_, i) => {
           const isFilled = i < value;
           return (
-            <TouchableOpacity key={i} onPress={() => onChange(i + 1)} activeOpacity={0.7} style={styles.star}>
+            <TouchableOpacity key={i} onPress={() => onChange(i + 1)} activeOpacity={0.8} style={styles.star}>
               <AtomicIcon
                 name={isFilled ? "star" : "star-outline"}
                 customSize={48}
-                customColor={isFilled ? "#FFD700" : colors.subTextColor}
+                customColor={isFilled ? colors.iconColor : colors.headerButtonBorder}
               />
             </TouchableOpacity>
           );
         })}
       </View>
       {value > 0 && (
-        <AtomicText type="headlineSmall" style={[styles.valueText, { color: colors.textColor }]}>
-          {value} / {max}
+        <AtomicText type="headlineSmall" style={[styles.valueText, { color: colors.textColor, marginTop: 12 }]}>
+          {value} <AtomicText type="bodyMedium" color="textSecondary">/ {max}</AtomicText>
         </AtomicText>
       )}
     </View>

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

@@ -19,7 +19,6 @@ export const SingleChoiceQuestion = ({
 
   const renderOption = (option: QuestionOption) => {
     const isSelected = value === option.id;
-    const textColor = isSelected ? colors.textColor : colors.subTextColor;
     const isEmoji = option.iconType === 'emoji';
 
     return (
@@ -30,34 +29,39 @@ export const SingleChoiceQuestion = ({
           {
             backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
             borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
+            borderWidth: isSelected ? 2 : 1,
           }
         ]}
         onPress={() => onChange(option.id)}
-        activeOpacity={0.7}
+        activeOpacity={0.8}
       >
         {option.icon && (
-          <View style={styles.optionIcon}>
+          <View style={[
+            styles.optionIcon,
+            { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
+          ]}>
             {isEmoji ? (
               <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
             ) : (
               <AtomicIcon
                 name={option.icon as any}
-                customSize={24}
-                customColor={textColor}
+                customSize={20}
+                customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
               />
             )}
           </View>
         )}
-        <AtomicText type="bodyLarge" style={[styles.optionLabel, { color: textColor, fontWeight: isSelected ? '700' : '500' }]}>
+        <AtomicText type="bodyLarge" style={[styles.optionLabel, { color: isSelected ? colors.textColor : colors.subTextColor, fontWeight: isSelected ? '700' : '500' }]}>
           {option.label}
         </AtomicText>
         <View style={[
-          styles.radio,
-          {
-            borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
-            borderWidth: isSelected ? 6 : 2,
-          }
-        ]} />
+          styles.radioOuter,
+          { borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder }
+        ]}>
+          {isSelected && (
+            <View style={[styles.radioInner, { backgroundColor: colors.iconColor }]} />
+          )}
+        </View>
       </TouchableOpacity>
     );
   };
@@ -77,20 +81,34 @@ const styles = StyleSheet.create({
   option: {
     flexDirection: "row",
     alignItems: "center",
-    borderRadius: 16,
+    borderRadius: 20,
     padding: 16,
-    borderWidth: 2,
+    marginBottom: 8,
   },
   optionIcon: {
-    marginRight: 12,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
   },
   optionLabel: {
     flex: 1,
+    fontSize: 16,
   },
-  radio: {
+  radioOuter: {
     width: 24,
     height: 24,
     borderRadius: 12,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioInner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
   },
 });
 

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

@@ -25,7 +25,7 @@ export const TextInputQuestion = ({
           styles.input,
           {
             backgroundColor: colors.featureItemBg,
-            borderColor: colors.headerButtonBorder,
+            borderColor: value ? colors.iconColor : colors.headerButtonBorder,
             color: colors.textColor,
           }
         ]}
@@ -38,6 +38,7 @@ export const TextInputQuestion = ({
         numberOfLines={(validation?.maxLength ?? 0) > 100 ? 5 : 1}
         autoCapitalize="sentences"
         autoCorrect={true}
+        textAlignVertical="top"
       />
       {validation?.maxLength && (
         <AtomicText type="labelSmall" style={[styles.charCount, { color: colors.subTextColor }]}>