@umituz/react-native-onboarding 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, gradient backgrounds, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -38,6 +38,7 @@
     "@umituz/react-native-design-system-atoms": "latest",
     "@react-native-community/slider": "^4.5.0",
     "expo-linear-gradient": "^15.0.0",
+    "lucide-react-native": "^0.344.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": "^5.0.0",
@@ -52,6 +53,7 @@
     "@umituz/react-native-design-system-atoms": "latest",
     "@react-native-community/slider": "^4.5.0",
     "expo-linear-gradient": "^15.0.7",
+    "lucide-react-native": "^0.344.0",
     "react": "^18.2.0",
     "react-native": "^0.74.0",
     "react-native-safe-area-context": "^5.6.0",

package/src/presentation/components/OnboardingSlide.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
+import * as LucideIcons from "lucide-react-native";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
 
 export interface OnboardingSlideProps {
@@ -19,52 +19,56 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide }) => {
   // Check if icon is an emoji (contains emoji characters) or Lucide icon name
   const isEmoji = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(slide.icon);
 
+  // Get Lucide icon component
+  const IconComponent = !isEmoji ? (LucideIcons as any)[slide.icon] : null;
+
   return (
-    <ScrollView
-      contentContainerStyle={styles.content}
-      showsVerticalScrollIndicator={false}
-      scrollEnabled={false}
-    >
-      <View style={styles.slideContent}>
-        <View style={styles.iconContainer}>
-          {isEmoji ? (
-            <Text style={styles.icon}>{slide.icon}</Text>
-          ) : (
-            <AtomicIcon
-              name={slide.icon as any}
-              customSize={60}
-              customColor="#FFFFFF"
-            />
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.slideContent}>
+          <View style={styles.iconContainer}>
+            {isEmoji ? (
+              <Text style={styles.icon}>{slide.icon}</Text>
+            ) : IconComponent ? (
+              <IconComponent size={60} color="#FFFFFF" />
+            ) : (
+              <Text style={styles.icon}>📱</Text>
+            )}
+          </View>
+          <Text style={styles.title}>{slide.title}</Text>
+          <Text style={styles.description}>{slide.description}</Text>
+          {slide.features && slide.features.length > 0 && (
+            <View style={styles.featuresContainer}>
+              {slide.features.map((feature, index) => (
+                <View key={index} style={styles.featureItem}>
+                  <Text style={styles.featureBullet}>•</Text>
+                  <Text style={styles.featureText}>{feature}</Text>
+                </View>
+              ))}
+            </View>
           )}
         </View>
-        <Text style={styles.title}>{slide.title}</Text>
-        <Text style={styles.description}>{slide.description}</Text>
-        {slide.features && slide.features.length > 0 && (
-          <View style={styles.featuresContainer}>
-            {slide.features.map((feature, index) => (
-              <View key={index} style={styles.featureItem}>
-                <Text style={styles.featureBullet}>•</Text>
-                <Text style={styles.featureText}>{feature}</Text>
-              </View>
-            ))}
-          </View>
-        )}
       </View>
-    </ScrollView>
+    </View>
   );
 };
 
 const getStyles = () =>
   StyleSheet.create({
+    container: {
+      flex: 1,
+    },
     content: {
       flex: 1,
       justifyContent: "center",
       alignItems: "center",
       paddingHorizontal: 30,
+      paddingVertical: 40,
     },
     slideContent: {
       alignItems: "center",
       maxWidth: 400,
+      width: "100%",
     },
     iconContainer: {
       width: 120,