@umituz/react-native-onboarding 2.6.7 → 2.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.6.7",
+  "version": "2.6.8",
   "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/QuestionRenderer.tsx

@@ -15,12 +15,24 @@ export interface QuestionRendererProps {
   question: OnboardingQuestion;
   value: any;
   onChange: (value: any) => void;
+  SliderComponent?: React.ComponentType<{
+    style?: any;
+    minimumValue: number;
+    maximumValue: number;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumTrackTintColor?: string;
+    maximumTrackTintColor?: string;
+    thumbTintColor?: string;
+    step?: number;
+  }>;
 }
 
 export const QuestionRenderer: React.FC<QuestionRendererProps> = ({
   question,
   value,
   onChange,
+  SliderComponent,
 }) => {
   switch (question.type) {
     case "single_choice":
@@ -48,11 +60,15 @@ export const QuestionRenderer: React.FC<QuestionRendererProps> = ({
         />
       );
     case "slider":
+      if (!SliderComponent) {
+        return null;
+      }
       return (
         <SliderQuestion
           question={question}
           value={value}
           onChange={onChange}
+          SliderComponent={SliderComponent}
         />
       );
     case "rating":
@@ -67,4 +83,3 @@ export const QuestionRenderer: React.FC<QuestionRendererProps> = ({
       return null;
   }
 };
-

package/src/presentation/components/QuestionSlide.tsx

@@ -15,6 +15,17 @@ export interface QuestionSlideProps {
   value: any;
   onChange: (value: any) => void;
   useGradient?: boolean;
+  SliderComponent?: React.ComponentType<{
+    style?: any;
+    minimumValue: number;
+    maximumValue: number;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumTrackTintColor?: string;
+    maximumTrackTintColor?: string;
+    thumbTintColor?: string;
+    step?: number;
+  }>;
 }
 
 export const QuestionSlide: React.FC<QuestionSlideProps> = ({
@@ -22,6 +33,7 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
   value,
   onChange,
   useGradient = false,
+  SliderComponent,
 }) => {
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
@@ -36,7 +48,12 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
       <QuestionSlideHeader slide={slide} useGradient={useGradient} />
 
       <View style={styles.questionContainer}>
-        <QuestionRenderer question={question} value={value} onChange={onChange} />
+        <QuestionRenderer
+          question={question}
+          value={value}
+          onChange={onChange}
+          SliderComponent={SliderComponent}
+        />
       </View>
 
       {question.validation?.required && !value && (

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

@@ -4,22 +4,24 @@
  */
 
 import React, { useMemo } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { View, Text, StyleSheet } from "react-native";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
-// Lazy import slider to handle peer dependency gracefully
-let SliderComponent: any = null;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  SliderComponent = require("@react-native-community/slider").default;
-} catch {
-  // Slider not available - will show fallback
-}
-
 export interface SliderQuestionProps {
   question: OnboardingQuestion;
   value: number | undefined;
   onChange: (value: number) => void;
+  SliderComponent: React.ComponentType<{
+    style?: any;
+    minimumValue: number;
+    maximumValue: number;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumTrackTintColor?: string;
+    maximumTrackTintColor?: string;
+    thumbTintColor?: string;
+    step?: number;
+  }>;
 }
 
 const getSliderConfig = (question: OnboardingQuestion) => {
@@ -29,87 +31,35 @@ const getSliderConfig = (question: OnboardingQuestion) => {
   return { min, max };
 };
 
-const SliderFallback: React.FC<{
-  min: number;
-  max: number;
-  value: number;
-  onChange: (value: number) => void;
-}> = ({ min, max, value, onChange }) => {
-  const handleIncrement = () => {
-    if (value < max) {
-      onChange(value + 1);
-    }
-  };
-
-  const handleDecrement = () => {
-    if (value > min) {
-      onChange(value - 1);
-    }
-  };
-
-  return (
-    <View style={styles.fallbackContainer}>
-      <View style={styles.fallbackControls}>
-        <TouchableOpacity
-          style={styles.fallbackButton}
-          onPress={handleDecrement}
-          activeOpacity={0.7}
-        >
-          <Text style={styles.fallbackButtonText}>−</Text>
-        </TouchableOpacity>
-        <Text style={styles.fallbackValue}>{value}</Text>
-        <TouchableOpacity
-          style={styles.fallbackButton}
-          onPress={handleIncrement}
-          activeOpacity={0.7}
-        >
-          <Text style={styles.fallbackButtonText}>+</Text>
-        </TouchableOpacity>
-      </View>
-      <View style={styles.fallbackLabels}>
-        <Text style={styles.label}>{min}</Text>
-        <Text style={styles.label}>{max}</Text>
-      </View>
-    </View>
-  );
-};
-
 export const SliderQuestion: React.FC<SliderQuestionProps> = ({
   question,
   value,
   onChange,
+  SliderComponent,
 }) => {
   const { min, max } = useMemo(() => getSliderConfig(question), [question]);
   const currentValue = value ?? min;
 
-  const sliderProps = {
-    style: styles.slider,
-    minimumValue: min,
-    maximumValue: max,
-    value: currentValue,
-    onValueChange: onChange,
-    minimumTrackTintColor: "#FFFFFF",
-    maximumTrackTintColor: "rgba(255, 255, 255, 0.3)",
-    thumbTintColor: "#FFFFFF",
-    step: 1,
-  };
-
   return (
     <View style={styles.container}>
       <View style={styles.valueContainer}>
         <Text style={styles.valueText}>{currentValue}</Text>
       </View>
-      {SliderComponent ? (
-        <>
-          <SliderComponent {...sliderProps} />
-          <View style={styles.labels}>
-            <Text style={styles.label}>{min}</Text>
-            <Text style={styles.label}>{max}</Text>
-          </View>
-        </>
-      ) : (
-        <SliderFallback min={min} max={max} value={currentValue} onChange={onChange} />
-      )}
+      <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>
+      </View>
     </View>
   );
 };
@@ -142,39 +92,4 @@ const styles = StyleSheet.create({
     color: "rgba(255, 255, 255, 0.7)",
     fontWeight: "500",
   },
-  fallbackContainer: {
-    width: "100%",
-  },
-  fallbackControls: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 24,
-  },
-  fallbackButton: {
-    width: 60,
-    height: 60,
-    backgroundColor: "rgba(255, 255, 255, 0.2)",
-    borderRadius: 30,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  fallbackButtonText: {
-    fontSize: 48,
-    fontWeight: "bold",
-    color: "#FFFFFF",
-    lineHeight: 60,
-  },
-  fallbackValue: {
-    fontSize: 36,
-    fontWeight: "bold",
-    color: "#FFFFFF",
-    minWidth: 80,
-    textAlign: "center",
-  },
-  fallbackLabels: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginTop: 16,
-  },
 });

package/src/presentation/screens/OnboardingScreen.tsx

@@ -62,6 +62,23 @@ export interface OnboardingScreenProps extends OnboardingOptions {
    * When true, shows premium paywall before completing onboarding
    */
   showPaywallOnComplete?: boolean;
+
+  /**
+   * Slider component for slider questions
+   * Required if using slider question type
+   * Import from @react-native-community/slider
+   */
+  SliderComponent?: React.ComponentType<{
+    style?: any;
+    minimumValue: number;
+    maximumValue: number;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumTrackTintColor?: string;
+    maximumTrackTintColor?: string;
+    thumbTintColor?: string;
+    step?: number;
+  }>;
 }
 
 /**
@@ -89,6 +106,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   onUpgrade,
   showPaywallOnComplete = false,
   useGradient: globalUseGradient = false,
+  SliderComponent,
 }) => {
   const insets = useSafeAreaInsets();
   const tokens = useAppDesignTokens();
@@ -231,6 +249,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
             value={currentAnswer}
             onChange={setCurrentAnswer}
             useGradient={useGradient}
+            SliderComponent={SliderComponent}
           />
         ) : (
           <OnboardingSlideComponent slide={currentSlide} useGradient={useGradient} />