@umituz/react-native-onboarding 2.7.1 → 2.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.7.1",
+  "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/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,10 +56,11 @@ export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
             isFirstSlide && styles.headerButtonDisabled,
           ]}
           activeOpacity={0.7}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         >
           <ArrowLeft
             size={20}
-            color={useGradient ? "#FFFFFF" : tokens.colors.textPrimary}
+            {...({ color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary } as any)}
           />
         </TouchableOpacity>
       ) : (

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

@@ -38,24 +38,57 @@ export const SliderQuestion: React.FC<SliderQuestionProps> = ({
   SliderComponent,
 }) => {
   const { min, max } = useMemo(() => getSliderConfig(question), [question]);
-  const currentValue = value ?? min;
+  const currentValue = value ?? question.defaultValue ?? min;
+  const [sliderError, setSliderError] = React.useState<string | null>(null);
+
+  // 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>
+      );
+    }
+
+    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 ensure @react-native-community/slider is properly installed and linked.
+          </Text>
+        </View>
+      );
+    }
+  };
 
   return (
     <View style={styles.container}>
       <View style={styles.valueContainer}>
         <Text style={styles.valueText}>{currentValue}</Text>
       </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}
-      />
+      {renderSlider()}
       <View style={styles.labels}>
         <Text style={styles.label}>{min}</Text>
         <Text style={styles.label}>{max}</Text>
@@ -92,4 +125,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,
   },
 });
-