@umituz/react-native-onboarding 2.7.2 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "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",
@@ -31,7 +31,6 @@
     "url": "https://github.com/umituz/react-native-onboarding"
   },
   "peerDependencies": {
-    "@react-native-community/slider": "^4.5.0",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-design-system-theme": "latest",

package/src/domain/entities/OnboardingQuestion.ts

@@ -11,7 +11,6 @@ export type QuestionType =
   | "single_choice" // Radio buttons - single selection
   | "multiple_choice" // Checkboxes - multiple selections
   | "text_input" // Text input field
-  | "slider" // Slider for numeric values
   | "rating" // Star rating or numeric rating
   | "date" // Date picker
   | "image_picker"; // Image selection from gallery
@@ -27,15 +26,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)
    */
@@ -62,12 +55,12 @@ export interface QuestionValidation {
   required?: boolean;
 
   /**
-   * Minimum value (for slider/rating)
+   * Minimum value (for rating)
    */
   min?: number;
 
   /**
-   * Maximum value (for slider/rating)
+   * Maximum value (for rating)
    */
   max?: number;
 

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/index.ts

@@ -80,8 +80,6 @@ export { MultipleChoiceQuestion } from "./presentation/components/questions/Mult
 export type { MultipleChoiceQuestionProps } from "./presentation/components/questions/MultipleChoiceQuestion";
 export { TextInputQuestion } from "./presentation/components/questions/TextInputQuestion";
 export type { TextInputQuestionProps } from "./presentation/components/questions/TextInputQuestion";
-export { SliderQuestion } from "./presentation/components/questions/SliderQuestion";
-export type { SliderQuestionProps } from "./presentation/components/questions/SliderQuestion";
 export { RatingQuestion } from "./presentation/components/questions/RatingQuestion";
 export type { RatingQuestionProps } from "./presentation/components/questions/RatingQuestion";
 

package/src/infrastructure/services/OnboardingValidationService.ts

@@ -37,7 +37,6 @@ export class OnboardingValidationService {
         return this.validateMultipleChoice(answer, validation);
       case "text_input":
         return this.validateTextInput(answer, validation);
-      case "slider":
       case "rating":
         return this.validateNumeric(answer, validation);
       default:
@@ -102,7 +101,7 @@ export class OnboardingValidationService {
   }
 
   /**
-   * Validate numeric answer (slider/rating)
+   * Validate numeric answer (rating)
    */
   private static validateNumeric(
     answer: any,

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/OnboardingScreenContent.tsx

@@ -51,17 +51,6 @@ export interface OnboardingScreenContentProps {
   renderSlide?: (slide: OnboardingSlide) => React.ReactNode;
   onUpgrade?: () => void;
   showPaywallOnComplete?: 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 OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = ({
@@ -91,7 +80,6 @@ export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = (
   renderSlide,
   onUpgrade,
   showPaywallOnComplete,
-  SliderComponent,
 }) => {
   const { themeMode } = useTheme();
 
@@ -132,7 +120,6 @@ export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = (
             value={currentAnswer}
             onChange={onAnswerChange}
             useGradient={useGradient}
-            SliderComponent={SliderComponent}
           />
         ) : (
           <OnboardingSlideComponent slide={currentSlide} useGradient={useGradient} />

package/src/presentation/components/QuestionRenderer.tsx

@@ -4,36 +4,22 @@
  */
 
 import React from "react";
-import { View, Text } from "react-native";
 import type { OnboardingQuestion } from "../../domain/entities/OnboardingQuestion";
 import { SingleChoiceQuestion } from "./questions/SingleChoiceQuestion";
 import { MultipleChoiceQuestion } from "./questions/MultipleChoiceQuestion";
 import { TextInputQuestion } from "./questions/TextInputQuestion";
-import { SliderQuestion } from "./questions/SliderQuestion";
 import { RatingQuestion } from "./questions/RatingQuestion";
 
 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":
@@ -60,29 +46,6 @@ export const QuestionRenderer: React.FC<QuestionRendererProps> = ({
           onChange={onChange}
         />
       );
-    case "slider":
-      if (!SliderComponent) {
-        return (
-          <View style={{ padding: 20, alignItems: "center" }}>
-            <Text style={{ color: "#FFFFFF", textAlign: "center" }}>
-              Slider component is not available. Please provide SliderComponent prop
-              to OnboardingScreen.
-            </Text>
-            <Text style={{ color: "#FFFFFF", textAlign: "center", marginTop: 8, fontSize: 12 }}>
-              Example: SliderComponent={"Slider"} where {"Slider"} is imported from
-              "@react-native-community/slider"
-            </Text>
-          </View>
-        );
-      }
-      return (
-        <SliderQuestion
-          question={question}
-          value={value}
-          onChange={onChange}
-          SliderComponent={SliderComponent}
-        />
-      );
     case "rating":
       return (
         <RatingQuestion

package/src/presentation/components/QuestionSlide.tsx

@@ -15,17 +15,6 @@ 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> = ({
@@ -33,7 +22,6 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
   value,
   onChange,
   useGradient = false,
-  SliderComponent,
 }) => {
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
@@ -52,7 +40,6 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
           question={question}
           value={value}
           onChange={onChange}
-          SliderComponent={SliderComponent}
         />
       </View>
 

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/screens/OnboardingScreen.tsx

@@ -51,23 +51,6 @@ 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;
-  }>;
 }
 
 export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
@@ -90,7 +73,6 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   onUpgrade,
   showPaywallOnComplete = false,
   useGradient: globalUseGradient = false,
-  SliderComponent,
 }) => {
   const {
     filteredSlides,
@@ -142,7 +124,6 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
       renderSlide={renderSlide}
       onUpgrade={onUpgrade}
       showPaywallOnComplete={showPaywallOnComplete}
-      SliderComponent={SliderComponent}
     />
   );
 };

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

@@ -1,137 +0,0 @@
-/**
- * Slider Question Component
- * Single Responsibility: Display slider for numeric value selection
- */
-
-import React, { useMemo } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
-
-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) => {
-  const { validation } = question;
-  const min = validation?.min ?? 0;
-  const max = validation?.max ?? 100;
-  return { min, max };
-};
-
-export const SliderQuestion: React.FC<SliderQuestionProps> = ({
-  question,
-  value,
-  onChange,
-  SliderComponent,
-}) => {
-  const { min, max } = useMemo(() => getSliderConfig(question), [question]);
-  const currentValue = value ?? question.defaultValue ?? min;
-
-  // 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>
-    );
-  } 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>
-    );
-  }
-};
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    paddingHorizontal: 8,
-  },
-  valueContainer: {
-    alignItems: "center",
-    marginBottom: 16,
-  },
-  valueText: {
-    fontSize: 48,
-    fontWeight: "bold",
-    color: "#FFFFFF",
-  },
-  slider: {
-    width: "100%",
-    height: 40,
-  },
-  labels: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginTop: 8,
-  },
-  label: {
-    fontSize: 14,
-    color: "rgba(255, 255, 255, 0.7)",
-    fontWeight: "500",
-  },
-  errorContainer: {
-    padding: 20,
-    alignItems: "center",
-    marginVertical: 16,
-  },
-  errorText: {
-    color: "#FFFFFF",
-    textAlign: "center",
-    fontSize: 14,
-  },
-});