@umituz/react-native-onboarding 2.7.2 → 2.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "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,15 +27,9 @@ 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,15 +62,9 @@ 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

@@ -36,7 +36,11 @@ export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
   const skipText = skipButtonText || t("onboarding.skip", "Skip");
 
   const handleBackPress = () => {
-    if (!isFirstSlide) {
+    /* eslint-disable-next-line no-console */
+    if (__DEV__) {
+      console.log("[OnboardingHeader] Back pressed, isFirstSlide:", isFirstSlide);
+    }
+    if (!isFirstSlide && onBack) {
       onBack();
     }
   };
@@ -52,6 +56,7 @@ export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
             isFirstSlide && styles.headerButtonDisabled,
           ]}
           activeOpacity={0.7}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         >
           <ArrowLeft
             size={20}

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((option) => renderOption(option))}
+      {question.options?.map(renderOption)}
     </View>
   );
 };

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

@@ -39,61 +39,62 @@ export const SliderQuestion: React.FC<SliderQuestionProps> = ({
 }) => {
   const { min, max } = useMemo(() => getSliderConfig(question), [question]);
   const currentValue = value ?? question.defaultValue ?? min;
+  const [sliderError, setSliderError] = React.useState<string | null>(null);
 
-  // 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>
+  // Render slider with error boundary
+  const renderSlider = () => {
+    if (!SliderComponent) {
+      return (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>
+            Slider component is not available. Please provide SliderComponent prop.
+          </Text>
         </View>
-      </View>
-    );
-  } 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>
+
+    try {
+      return (
+        <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}
+        />
+      );
+    } catch (error) {
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.error("[SliderQuestion] Error rendering slider:", error);
+      }
+      setSliderError("Unable to render slider. Native module may not be linked.");
+      return (
         <View style={styles.errorContainer}>
           <Text style={styles.errorText}>
-            Unable to render slider. Please check SliderComponent installation.
+            Unable to render slider. Please ensure @react-native-community/slider is properly installed and linked.
           </Text>
         </View>
-        <View style={styles.labels}>
-          <Text style={styles.label}>{min}</Text>
-          <Text style={styles.label}>{max}</Text>
-        </View>
+      );
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.valueContainer}>
+        <Text style={styles.valueText}>{currentValue}</Text>
+      </View>
+      {renderSlider()}
+      <View style={styles.labels}>
+        <Text style={styles.label}>{min}</Text>
+        <Text style={styles.label}>{max}</Text>
       </View>
-    );
-  }
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({