@umituz/react-native-onboarding 2.7.0 → 2.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.7.0",
+  "version": "2.7.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/domain/entities/OnboardingQuestion.ts

@@ -27,9 +27,15 @@ export interface QuestionOption {
 
   /**
    * Display label for the option
+   * Can be either a string or an i18n key
    */
   label: string;
 
+  /**
+   * i18n key for label (optional, if provided, label will be used as fallback)
+   */
+  labelKey?: string;
+
   /**
    * Optional icon (emoji or Lucide icon name)
    */

package/src/domain/entities/OnboardingSlide.ts

@@ -62,9 +62,15 @@ export interface OnboardingSlide {
 
   /**
    * Optional features list to display
+   * Can be either strings or i18n keys
    */
   features?: string[];
 
+  /**
+   * Optional i18n keys for features (optional, if provided, features will be used as fallback)
+   */
+  featuresKeys?: string[];
+
   /**
    * Optional question for personalization
    * Only used when type is "question"

package/src/presentation/components/OnboardingHeader.tsx

@@ -6,6 +6,7 @@
 
 import React, { useMemo } from "react";
 import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+import { ArrowLeft } from "lucide-react-native";
 import { useLocalization } from "@umituz/react-native-localization";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 
@@ -34,24 +35,34 @@ export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
 
   const skipText = skipButtonText || t("onboarding.skip", "Skip");
 
+  const handleBackPress = () => {
+    if (!isFirstSlide) {
+      onBack();
+    }
+  };
+
   return (
     <View style={styles.header}>
       {showBackButton ? (
         <TouchableOpacity
-          onPress={onBack}
+          onPress={handleBackPress}
           disabled={isFirstSlide}
           style={[
             styles.headerButton,
             isFirstSlide && styles.headerButtonDisabled,
           ]}
+          activeOpacity={0.7}
         >
-          <Text style={styles.headerButtonText}>←</Text>
+          <ArrowLeft
+            size={20}
+            {...({ color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary } as any)}
+          />
         </TouchableOpacity>
       ) : (
         <View style={styles.headerButton} />
       )}
       {showSkipButton && (
-        <TouchableOpacity onPress={onSkip}>
+        <TouchableOpacity onPress={onSkip} activeOpacity={0.7}>
           <Text style={styles.skipText}>{skipText}</Text>
         </TouchableOpacity>
       )}
@@ -89,11 +100,6 @@ const getStyles = (
     headerButtonDisabled: {
       opacity: 0.3,
     },
-    headerButtonText: {
-      color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
-      fontSize: 20,
-      fontWeight: "bold",
-    },
     skipText: {
       color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
       fontSize: 16,

package/src/presentation/components/QuestionSlideHeader.tsx

@@ -84,3 +84,7 @@ const getStyles = (
     },
   });
 
+
+
+
+

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

@@ -58,7 +58,7 @@ export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
 
   return (
     <View style={styles.container}>
-      {question.options?.map(renderOption)}
+      {question.options?.map((option) => renderOption(option))}
     </View>
   );
 };

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

@@ -38,30 +38,62 @@ export const SliderQuestion: React.FC<SliderQuestionProps> = ({
   SliderComponent,
 }) => {
   const { min, max } = useMemo(() => getSliderConfig(question), [question]);
-  const currentValue = value ?? min;
+  const currentValue = value ?? question.defaultValue ?? min;
 
-  return (
-    <View style={styles.container}>
-      <View style={styles.valueContainer}>
-        <Text style={styles.valueText}>{currentValue}</Text>
+  // Error boundary for SliderComponent
+  try {
+    return (
+      <View style={styles.container}>
+        <View style={styles.valueContainer}>
+          <Text style={styles.valueText}>{currentValue}</Text>
+        </View>
+        {SliderComponent ? (
+          <SliderComponent
+            style={styles.slider}
+            minimumValue={min}
+            maximumValue={max}
+            value={currentValue}
+            onValueChange={onChange}
+            minimumTrackTintColor="#FFFFFF"
+            maximumTrackTintColor="rgba(255, 255, 255, 0.3)"
+            thumbTintColor="#FFFFFF"
+            step={1}
+          />
+        ) : (
+          <View style={styles.errorContainer}>
+            <Text style={styles.errorText}>
+              Slider component is not available. Please provide SliderComponent prop.
+            </Text>
+          </View>
+        )}
+        <View style={styles.labels}>
+          <Text style={styles.label}>{min}</Text>
+          <Text style={styles.label}>{max}</Text>
+        </View>
       </View>
-      <SliderComponent
-        style={styles.slider}
-        minimumValue={min}
-        maximumValue={max}
-        value={currentValue}
-        onValueChange={onChange}
-        minimumTrackTintColor="#FFFFFF"
-        maximumTrackTintColor="rgba(255, 255, 255, 0.3)"
-        thumbTintColor="#FFFFFF"
-        step={1}
-      />
-      <View style={styles.labels}>
-        <Text style={styles.label}>{min}</Text>
-        <Text style={styles.label}>{max}</Text>
+    );
+  } catch (error) {
+    /* eslint-disable-next-line no-console */
+    if (__DEV__) {
+      console.error("SliderQuestion render error:", error);
+    }
+    return (
+      <View style={styles.container}>
+        <View style={styles.valueContainer}>
+          <Text style={styles.valueText}>{currentValue}</Text>
+        </View>
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>
+            Unable to render slider. Please check SliderComponent installation.
+          </Text>
+        </View>
+        <View style={styles.labels}>
+          <Text style={styles.label}>{min}</Text>
+          <Text style={styles.label}>{max}</Text>
+        </View>
       </View>
-    </View>
-  );
+    );
+  }
 };
 
 const styles = StyleSheet.create({
@@ -92,4 +124,14 @@ const styles = StyleSheet.create({
     color: "rgba(255, 255, 255, 0.7)",
     fontWeight: "500",
   },
+  errorContainer: {
+    padding: 20,
+    alignItems: "center",
+    marginVertical: 16,
+  },
+  errorText: {
+    color: "#FFFFFF",
+    textAlign: "center",
+    fontSize: 14,
+  },
 });

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

@@ -65,4 +65,3 @@ const styles = StyleSheet.create({
     marginTop: 8,
   },
 });
-