@umituz/react-native-onboarding 2.6.10 → 2.7.0

package/README.md

@@ -156,8 +156,11 @@ const slides: OnboardingSlide[] = [
   },
 ];
 
+import Slider from '@react-native-community/slider';
+
 <OnboardingScreen
   slides={slides}
+  SliderComponent={Slider}
   onComplete={async () => {
     const userData = onboardingStore.getUserData();
     console.log('User answers:', userData.answers);
@@ -185,6 +188,7 @@ const slides: OnboardingSlide[] = [
 | `showProgressText` | `boolean` | `true` | Show progress text (1 of 5) |
 | `storageKey` | `string` | - | Custom storage key for completion state |
 | `autoComplete` | `boolean` | `false` | Auto-complete on last slide |
+| `SliderComponent` | `React.ComponentType` | - | **Required if using slider questions.** Import from `@react-native-community/slider` |
 
 ### OnboardingSlide Interface
 
@@ -246,6 +250,18 @@ interface OnboardingSlide {
 
 #### Slider
 
+**⚠️ Important:** When using slider questions, you must provide the `SliderComponent` prop to `OnboardingScreen`:
+
+```tsx
+import Slider from '@react-native-community/slider';
+
+<OnboardingScreen
+  slides={slides}
+  SliderComponent={Slider}
+  onComplete={handleComplete}
+/>
+```
+
 ```typescript
 {
   type: 'slider',
@@ -255,6 +271,8 @@ interface OnboardingSlide {
 }
 ```
 
+**Note:** Make sure `@react-native-community/slider` is installed and properly linked (run `pod install` for iOS).
+
 #### Rating
 
 ```typescript

package/package.json

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

package/src/presentation/components/QuestionRenderer.tsx

@@ -4,6 +4,7 @@
  */
 
 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";
@@ -61,7 +62,18 @@ export const QuestionRenderer: React.FC<QuestionRendererProps> = ({
       );
     case "slider":
       if (!SliderComponent) {
-        return null;
+        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