@umituz/react-native-onboarding 3.5.7 → 3.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.5.7",
+  "version": "3.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",
@@ -37,8 +37,7 @@
     "expo-video": ">=1.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
-    "react-native-safe-area-context": ">=4.0.0",
-    "zustand": "^4.5.0 || ^5.0.0"
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "devDependencies": {
     "@expo/vector-icons": "^14.0.0",
@@ -61,8 +60,7 @@
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-safe-area-context": "^5.6.0",
-    "typescript": "~5.9.2",
-    "zustand": "^5.0.0"
+    "typescript": "~5.9.2"
   },
   "publishConfig": {
     "access": "public"

package/src/infrastructure/storage/OnboardingStore.ts

@@ -5,13 +5,14 @@
  * Uses @umituz/react-native-storage for persistence
  */
 
-import { create, StoreApi } from "zustand";
+import { useMemo } from "react";
+import { createStore } from "@umituz/react-native-storage";
 import type { OnboardingStoreState } from "./OnboardingStoreState";
 import { initialOnboardingState } from "./OnboardingStoreState";
 import { createOnboardingStoreActions } from "./OnboardingStoreActions";
 import { createOnboardingStoreSelectors } from "./OnboardingStoreSelectors";
 
-interface OnboardingStore extends OnboardingStoreState {
+interface OnboardingActions {
   // Simple actions
   setCurrentStep: (step: number) => void;
   setLoading: (loading: boolean) => void;
@@ -23,43 +24,48 @@ interface OnboardingStore extends OnboardingStoreState {
   complete: (storageKey?: string) => Promise<void>;
   skip: (storageKey?: string) => Promise<void>;
   reset: (storageKey?: string) => Promise<void>;
-  saveAnswer: (questionId: string, answer: any) => Promise<void>;
-  setUserData: (data: any) => Promise<void>;
+  saveAnswer: (questionId: string, answer: unknown) => Promise<void>;
+  setUserData: (data: unknown) => Promise<void>;
 }
 
-export const useOnboardingStore = create<OnboardingStore>((set: StoreApi<OnboardingStore>['setState'], get: StoreApi<OnboardingStore>['getState']) => {
-  const actions = createOnboardingStoreActions(set, get);
+export const useOnboardingStore = createStore<OnboardingStoreState, OnboardingActions>({
+  name: "onboarding-store",
+  initialState: initialOnboardingState,
+  persist: false,
+  actions: (set, get) => {
+    const actions = createOnboardingStoreActions(set, get);
 
-  return {
-    ...initialOnboardingState,
+    return {
+      setCurrentStep: (step) => set({ currentStep: step }),
+      setLoading: (loading) => set({ loading }),
+      setError: (error) => set({ error }),
+      setState: set,
+      getState: get,
 
-    setCurrentStep: (step) => set({ currentStep: step }),
-    setLoading: (loading) => set({ loading }),
-    setError: (error) => set({ error }),
-    setState: set,
-    getState: get,
-
-    // Async actions from actions module
-    initialize: actions.initialize,
-    complete: actions.complete,
-    skip: actions.skip,
-    reset: actions.reset,
-    saveAnswer: actions.saveAnswer,
-    setUserData: actions.setUserData,
-  };
+      // Async actions from actions module
+      initialize: actions.initialize,
+      complete: actions.complete,
+      skip: actions.skip,
+      reset: actions.reset,
+      saveAnswer: actions.saveAnswer,
+      setUserData: actions.setUserData,
+    };
+  },
 });
 
 /**
  * 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;
+
+  const actions = useMemo(() => createOnboardingStoreActions(setState, getState), [setState, getState]);
+  const selectors = useMemo(() => createOnboardingStoreSelectors(getState), [getState]);
 
-  return {
+  return useMemo(() => ({
     // State
     isOnboardingComplete: store.isOnboardingComplete,
     currentStep: store.currentStep,
@@ -81,6 +87,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 }]}>