@umituz/react-native-onboarding 3.0.4 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.0.4",
+  "version": "3.1.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,6 +31,7 @@
     "url": "https://github.com/umituz/react-native-onboarding"
   },
   "peerDependencies": {
+    "@umituz/react-native-icons": "latest",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-design-system-theme": "latest",
@@ -46,6 +47,7 @@
   "devDependencies": {
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
+    "@umituz/react-native-icons": "latest",
     "@umituz/react-native-storage": "^1.1.0",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-design-system-theme": "latest",

package/src/presentation/components/OnboardingHeader.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from "react";
 import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
-import { Feather } from "@expo/vector-icons";
+import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
 import { useLocalization } from "@umituz/react-native-localization";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 
@@ -58,10 +58,10 @@ export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
           activeOpacity={0.7}
           hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         >
-          <Feather
-            name="arrow-left"
-            size={20}
-            color={useGradient ? "#FFFFFF" : tokens.colors.textPrimary}
+          <AtomicIcon
+            name="chevron-back"
+            customSize={20}
+            customColor={useGradient ? "#FFFFFF" : tokens.colors.textPrimary}
           />
         </TouchableOpacity>
       ) : (

package/src/presentation/components/OnboardingSlide.tsx

@@ -2,11 +2,12 @@
  * Onboarding Slide Component
  *
  * Displays a single onboarding slide with icon, title, and description
+ * Uses AtomicIcon from design system for consistent icon rendering
  */
 
 import React, { useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { Feather } from "@expo/vector-icons";
+import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
 import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system-theme";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
 
@@ -15,15 +16,40 @@ export interface OnboardingSlideProps {
   useGradient?: boolean;
 }
 
+const EMOJI_REGEX = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u;
+
 export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide, useGradient = false }) => {
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
 
-  // Check if icon is an emoji (contains emoji characters)
-  const isEmoji = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(slide.icon);
+  const isEmoji = EMOJI_REGEX.test(slide.icon);
+  const isValidIconName = !isEmoji && typeof slide.icon === "string";
+
+  const renderIcon = (color: string) => {
+    if (isEmoji) {
+      return <Text style={styles.icon}>{slide.icon}</Text>;
+    }
+    if (isValidIconName) {
+      return <AtomicIcon name={slide.icon} customSize={60} customColor={color} />;
+    }
+    return <Text style={styles.icon}>📱</Text>;
+  };
+
+  const renderFeatures = () => {
+    if (!slide.features || slide.features.length === 0) return null;
+    return (
+      <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>
+    );
+  };
 
-  // Validate if it's a valid Feather icon name
-  const isValidFeatherIcon = !isEmoji && typeof slide.icon === 'string';
+  const iconColor = useGradient ? "#FFFFFF" : tokens.colors.textPrimary;
 
   return (
     <ScrollView
@@ -31,62 +57,18 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide, useGrad
       showsVerticalScrollIndicator={false}
     >
       {useGradient ? (
-        // Gradient kullanıldığında card olmadan direkt içerik
         <>
-          <View style={styles.iconContainer}>
-            {isEmoji ? (
-              <Text style={styles.icon}>{slide.icon}</Text>
-            ) : isValidFeatherIcon ? (
-              <Feather
-                name={slide.icon as any}
-                size={60}
-                color="#FFFFFF"
-              />
-            ) : (
-              <Text style={styles.icon}>📱</Text>
-            )}
-          </View>
+          <View style={styles.iconContainer}>{renderIcon(iconColor)}</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>
-          )}
+          {renderFeatures()}
         </>
       ) : (
-        // Normal modda card ile
         <View style={styles.slideContent}>
-          <View style={styles.iconContainer}>
-            {isEmoji ? (
-              <Text style={styles.icon}>{slide.icon}</Text>
-            ) : isValidFeatherIcon ? (
-              <Feather
-                name={slide.icon as any}
-                size={60}
-                color={tokens.colors.textPrimary}
-              />
-            ) : (
-              <Text style={styles.icon}>📱</Text>
-            )}
-          </View>
+          <View style={styles.iconContainer}>{renderIcon(iconColor)}</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>
-          )}
+          {renderFeatures()}
         </View>
       )}
     </ScrollView>

package/src/presentation/screens/OnboardingScreen.tsx

@@ -74,6 +74,10 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   showPaywallOnComplete = false,
   useGradient: globalUseGradient = false,
 }) => {
+  if (__DEV__) {
+    console.log("[OnboardingScreen] Rendering with slides:", slides?.length);
+  }
+
   const {
     filteredSlides,
     currentSlide,
@@ -96,8 +100,15 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
     globalUseGradient,
   });
 
+  if (__DEV__) {
+    console.log("[OnboardingScreen] filteredSlides:", filteredSlides?.length);
+  }
+
   // Early return if no slides - prevents rendering empty/broken screen
   if (filteredSlides.length === 0) {
+    if (__DEV__) {
+      console.log("[OnboardingScreen] No slides, returning null");
+    }
     return null;
   }