@umituz/react-native-onboarding 3.3.8 → 3.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.3.8",
+  "version": "3.3.10",
   "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/domain/entities/OnboardingSlide.ts

@@ -41,6 +41,11 @@ export interface OnboardingSlide {
    */
   icon: string;
 
+  /**
+   * Type of icon: 'emoji' or 'icon' (default: 'icon')
+   */
+  iconType?: 'emoji' | 'icon';
+
   /**
    * Gradient colors for the slide background (optional)
    * [startColor, endColor] or [color1, color2, color3] for multi-stop gradients

package/src/presentation/components/BackgroundVideo.tsx

@@ -7,27 +7,18 @@ interface BackgroundVideoProps {
     overlayOpacity?: number;
 }
 
-export const BackgroundVideo: React.FC<BackgroundVideoProps> = ({ source, overlayOpacity = 0.5 }) => {
-    const player = useVideoPlayer(source, player => {
-        player.loop = true;
-        player.play();
-        player.muted = true;
+export const BackgroundVideo = ({ source, overlayOpacity = 0.5 }: BackgroundVideoProps) => {
+    const player = useVideoPlayer(source, (p) => {
+        p.loop = true;
+        p.play();
+        p.muted = true;
     });
 
     return (
         <View style={StyleSheet.absoluteFill}>
-            <VideoView
-                player={player}
-                style={StyleSheet.absoluteFill}
-                contentFit="cover"
-                nativeControls={false}
-            />
-            <View
-                style={[
-                    StyleSheet.absoluteFill,
-                    { backgroundColor: `rgba(0,0,0,${overlayOpacity})` }
-                ]}
-            />
+            <VideoView player={player} style={StyleSheet.absoluteFill} contentFit="cover" nativeControls={false} />
+            <View style={[StyleSheet.absoluteFill, { backgroundColor: `rgba(0,0,0,${overlayOpacity})` }]} />
         </View>
     );
 };
+

package/src/presentation/components/OnboardingFooter.tsx

@@ -1,14 +1,9 @@
-/**
- * Onboarding Footer Component
- *
- * Displays progress bar, dots, and next/get started button
- */
-
-import React, { useMemo } from "react";
-import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+import React from "react";
+import { View, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useLocalization } from "@umituz/react-native-localization";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicButton, AtomicText } from "@umituz/react-native-design-system";
+import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface OnboardingFooterProps {
   currentIndex: number;
@@ -21,10 +16,9 @@ export interface OnboardingFooterProps {
   nextButtonText?: string;
   getStartedButtonText?: string;
   disabled?: boolean;
-  useGradient?: boolean;
 }
 
-export const OnboardingFooter: React.FC<OnboardingFooterProps> = ({
+export const OnboardingFooter = ({
   currentIndex,
   totalSlides,
   isLastSlide,
@@ -35,28 +29,23 @@ export const OnboardingFooter: React.FC<OnboardingFooterProps> = ({
   nextButtonText,
   getStartedButtonText,
   disabled = false,
-  useGradient = false,
-}) => {
+}: OnboardingFooterProps) => {
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
-  const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(insets, tokens, useGradient), [insets, tokens, useGradient]);
+  const { colors } = useOnboardingTheme();
 
   const buttonText = isLastSlide
-    ? getStartedButtonText || t("onboarding.getStarted")
-    : nextButtonText || t("general.continue");
+    ? getStartedButtonText || t("onboarding.getStarted") || "Get Started"
+    : nextButtonText || t("general.continue") || "Continue";
+
+  const progressPercent = ((currentIndex + 1) / totalSlides) * 100;
 
   return (
-    <View style={styles.footer}>
+    <View style={[styles.footer, { paddingBottom: insets.bottom + 24 }]}>
       {showProgressBar && (
         <View style={styles.progressContainer}>
-          <View style={styles.progressBar}>
-            <View
-              style={[
-                styles.progressFill,
-                { width: `${((currentIndex + 1) / totalSlides) * 100}%` },
-              ]}
-            />
+          <View style={[styles.progressBar, { backgroundColor: colors.progressBarBg }]}>
+            <View style={[styles.progressFill, { width: `${progressPercent}%`, backgroundColor: colors.progressFillColor }]} />
           </View>
         </View>
       )}
@@ -66,106 +55,74 @@ export const OnboardingFooter: React.FC<OnboardingFooterProps> = ({
           {Array.from({ length: totalSlides }).map((_, index) => (
             <View
               key={index}
-              style={[styles.dot, index === currentIndex && styles.dotActive]}
+              style={[
+                styles.dot,
+                { backgroundColor: colors.dotColor },
+                index === currentIndex && {
+                  width: 12,
+                  backgroundColor: colors.activeDotColor
+                }
+              ]}
             />
           ))}
         </View>
       )}
 
-      <TouchableOpacity
-        style={[styles.button, disabled && styles.buttonDisabled]}
+      <AtomicButton
         onPress={onNext}
         disabled={disabled}
-        activeOpacity={disabled ? 1 : 0.7}
+        fullWidth
+        variant="primary"
+        style={{ backgroundColor: colors.buttonBg }}
+        textStyle={{ color: colors.buttonTextColor }}
       >
-        <Text style={[styles.buttonText, disabled && styles.buttonTextDisabled]}>
-          {buttonText}
-        </Text>
-      </TouchableOpacity>
+        {buttonText}
+      </AtomicButton>
 
       {showProgressText && (
-        <Text style={styles.progressText}>
-          {currentIndex + 1} {t("general.of")} {totalSlides}
-        </Text>
+        <AtomicText
+          type="labelSmall"
+          style={[styles.progressText, { color: colors.progressTextColor }]}
+        >
+          {currentIndex + 1} {t("general.of") || "of"} {totalSlides}
+        </AtomicText>
       )}
     </View>
   );
 };
 
-const getStyles = (
-  insets: { bottom: number },
-  tokens: ReturnType<typeof useAppDesignTokens>,
-  useGradient: boolean,
-) =>
-  StyleSheet.create({
-    footer: {
-      paddingHorizontal: 30,
-      paddingTop: 30,
-      paddingBottom: insets.bottom + 20,
-    },
-    progressContainer: {
-      marginBottom: 20,
-    },
-    progressBar: {
-      height: 4,
-      backgroundColor: useGradient
-        ? "rgba(255, 255, 255, 0.2)"
-        : tokens.colors.borderLight,
-      borderRadius: 2,
-      overflow: "hidden",
-    },
-    progressFill: {
-      height: "100%",
-      backgroundColor: useGradient ? tokens.colors.surface : tokens.colors.primary,
-      borderRadius: 2,
-    },
-    dots: {
-      flexDirection: "row",
-      justifyContent: "center",
-      marginBottom: 30,
-      gap: 8,
-    },
-    dot: {
-      width: 6,
-      height: 6,
-      borderRadius: 3,
-      backgroundColor: useGradient
-        ? "rgba(255, 255, 255, 0.4)"
-        : tokens.colors.borderLight,
-    },
-    dotActive: {
-      width: 8,
-      backgroundColor: useGradient ? tokens.colors.surface : tokens.colors.primary,
-    },
-    button: {
-      backgroundColor: useGradient ? tokens.colors.surface : tokens.colors.primary,
-      paddingVertical: 16,
-      borderRadius: 28,
-      alignItems: "center",
-      marginBottom: 12,
-    },
-    buttonDisabled: {
-      backgroundColor: useGradient
-        ? "rgba(255, 255, 255, 0.4)"
-        : tokens.colors.borderLight,
-      opacity: 0.5,
-    },
-    buttonText: {
-      color: useGradient ? tokens.colors.primary : tokens.colors.surface,
-      fontSize: 16,
-      fontWeight: "bold",
-    },
-    buttonTextDisabled: {
-      color: useGradient
-        ? "rgba(255, 255, 255, 0.6)"
-        : tokens.colors.textSecondary,
-    },
-    progressText: {
-      color: useGradient
-        ? "rgba(255, 255, 255, 0.75)"
-        : tokens.colors.textSecondary,
-      fontSize: 12,
-      textAlign: "center",
-    },
-  });
+const styles = StyleSheet.create({
+  footer: {
+    paddingHorizontal: 24,
+    paddingTop: 24,
+  },
+  progressContainer: {
+    marginBottom: 20,
+  },
+  progressBar: {
+    height: 4,
+    borderRadius: 2,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 2,
+  },
+  dots: {
+    flexDirection: "row",
+    justifyContent: "center",
+    marginBottom: 24,
+    gap: 8,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  progressText: {
+    marginTop: 12,
+    textAlign: "center",
+  },
+});
+
 

package/src/presentation/components/OnboardingHeader.tsx

@@ -1,14 +1,8 @@
-/**
- * Onboarding Header Component
- *
- * Displays back and skip buttons
- */
-
-import React, { useMemo } from "react";
-import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
-import { AtomicIcon } from "@umituz/react-native-design-system";
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface OnboardingHeaderProps {
   isFirstSlide: boolean;
@@ -17,99 +11,80 @@ export interface OnboardingHeaderProps {
   showBackButton?: boolean;
   showSkipButton?: boolean;
   skipButtonText?: string;
-  useGradient?: boolean;
 }
 
-export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
+export const OnboardingHeader = ({
   isFirstSlide,
   onBack,
   onSkip,
   showBackButton = true,
   showSkipButton = true,
   skipButtonText,
-  useGradient = false,
-}) => {
+}: OnboardingHeaderProps) => {
   const { t } = useLocalization();
-  const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
-
-  const skipText = skipButtonText || t("onboarding.skip");
+  const { colors } = useOnboardingTheme();
 
-  const handleBackPress = () => {
-    /* eslint-disable-next-line no-console */
-    if (__DEV__) {
-      console.log("[OnboardingHeader] Back pressed, isFirstSlide:", isFirstSlide);
-    }
-    if (!isFirstSlide && onBack) {
-      onBack();
-    }
-  };
+  const skipText = skipButtonText || t("onboarding.skip") || "Skip";
 
   return (
     <View style={styles.header}>
       {showBackButton ? (
         <TouchableOpacity
-          onPress={handleBackPress}
+          onPress={() => !isFirstSlide && onBack?.()}
           disabled={isFirstSlide}
           style={[
             styles.headerButton,
+            {
+              backgroundColor: colors.headerButtonBg,
+              borderColor: colors.headerButtonBorder,
+            },
             isFirstSlide && styles.headerButtonDisabled,
           ]}
           activeOpacity={0.7}
           hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         >
-          <AtomicIcon
-            name="chevron-back"
-            customSize={20}
-            customColor={useGradient ? tokens.colors.surface : tokens.colors.textPrimary}
-          />
+          <AtomicIcon name="chevron-back" customSize={20} customColor={colors.iconColor} />
         </TouchableOpacity>
       ) : (
         <View style={styles.headerButton} />
       )}
-      {showSkipButton && (
+      {showSkipButton ? (
         <TouchableOpacity onPress={onSkip} activeOpacity={0.7}>
-          <Text style={styles.skipText}>{skipText}</Text>
+          <AtomicText
+            type="labelLarge"
+            style={[styles.skipText, { color: colors.textColor }]}
+          >
+            {skipText}
+          </AtomicText>
         </TouchableOpacity>
-      )}
+      ) : <View />}
     </View>
   );
 };
 
-const getStyles = (
-  tokens: ReturnType<typeof useAppDesignTokens>,
-  useGradient: boolean,
-) =>
-  StyleSheet.create({
-    header: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      paddingHorizontal: 20,
-      paddingTop: 10,
-      paddingBottom: 20,
-    },
-    headerButton: {
-      width: 40,
-      height: 40,
-      borderRadius: 20,
-      backgroundColor: useGradient
-        ? "rgba(255, 255, 255, 0.2)"
-        : tokens.colors.surface,
-      alignItems: "center",
-      justifyContent: "center",
-      borderWidth: 1,
-      borderColor: useGradient
-        ? "rgba(255, 255, 255, 0.3)"
-        : tokens.colors.borderLight,
-    },
-    headerButtonDisabled: {
-      opacity: 0.3,
-    },
-    skipText: {
-      color: useGradient ? tokens.colors.surface : tokens.colors.textPrimary,
-      fontSize: 16,
-      fontWeight: "600",
-    },
-  });
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    paddingBottom: 20,
+  },
+  headerButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+  },
+  headerButtonDisabled: {
+    opacity: 0,
+  },
+  skipText: {
+    fontWeight: "700",
+  },
+});
+
 

package/src/presentation/components/OnboardingResetSetting.tsx

@@ -1,34 +1,19 @@
-/**
- * Onboarding Reset Setting Component
- * Single Responsibility: Provide onboarding reset functionality for settings screens
- * Generic component for hundreds of apps
- */
-
 import React, { useCallback } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
 
 export interface OnboardingResetSettingProps {
-    /** Callback when reset is triggered */
     onReset: () => void | Promise<void>;
-    /** Title text to display */
     title?: string;
-    /** Description text to display */
     description?: string;
-    /** Custom icon name */
     iconName?: string;
-    /** Custom icon color */
     iconColor?: string;
-    /** Custom title color */
     titleColor?: string;
-    /** Whether to show this setting (default: only in __DEV__) */
     visible?: boolean;
-    /** Is last item in list */
     isLast?: boolean;
 }
 
-export const OnboardingResetSetting: React.FC<OnboardingResetSettingProps> = ({
+export const OnboardingResetSetting = ({
     onReset,
     title = "Reset Onboarding",
     description = "Show onboarding flow again",
@@ -37,43 +22,31 @@ export const OnboardingResetSetting: React.FC<OnboardingResetSettingProps> = ({
     titleColor,
     visible = __DEV__,
     isLast = false,
-}) => {
+}: OnboardingResetSettingProps) => {
     const tokens = useAppDesignTokens();
 
     const handlePress = useCallback(async () => {
         await onReset();
     }, [onReset]);
 
-    if (!visible) {
-        return null;
-    }
+    if (!visible) return null;
 
-    const defaultIconColor = iconColor || tokens.colors.warning;
-    const defaultTitleColor = titleColor || tokens.colors.warning;
+    const defaultIconColor = iconColor || tokens.colors.error;
+    const defaultTitleColor = titleColor || tokens.colors.error;
 
     return (
         <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
             <View style={[styles.container, !isLast && { borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: tokens.colors.border }]}>
                 <View style={styles.iconContainer}>
-                    <AtomicIcon
-                        name={iconName}
-                        size="md"
-                        customColor={defaultIconColor}
-                    />
+                    <AtomicIcon name={iconName} size="md" customColor={defaultIconColor} />
                 </View>
                 <View style={styles.content}>
-                    <Text
-                        style={[styles.title, { color: defaultTitleColor }]}
-                        numberOfLines={1}
-                    >
+                    <AtomicText type="bodyLarge" style={{ color: defaultTitleColor, fontWeight: '600' }} numberOfLines={1}>
                         {title}
-                    </Text>
-                    <Text
-                        style={[styles.description, { color: tokens.colors.textSecondary }]}
-                        numberOfLines={1}
-                    >
+                    </AtomicText>
+                    <AtomicText type="bodyMedium" style={{ color: tokens.colors.textSecondary }} numberOfLines={1}>
                         {description}
-                    </Text>
+                    </AtomicText>
                 </View>
             </View>
         </TouchableOpacity>
@@ -84,21 +57,14 @@ const styles = StyleSheet.create({
     container: {
         flexDirection: "row",
         alignItems: "center",
-        paddingVertical: 12,
-        paddingHorizontal: 16,
+        paddingVertical: 16,
+        paddingHorizontal: 20,
     },
     iconContainer: {
-        marginRight: 12,
+        marginRight: 16,
     },
     content: {
         flex: 1,
-    },
-    title: {
-        fontSize: 16,
-        fontWeight: "500",
-    },
-    description: {
-        fontSize: 14,
-        marginTop: 2,
-    },
+    }
 });
+

package/src/presentation/components/OnboardingScreenContent.tsx

@@ -56,7 +56,7 @@ export interface OnboardingScreenContentProps {
   variant?: "default" | "card" | "minimal" | "fullscreen";
 }
 
-export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = ({
+export const OnboardingScreenContent = ({
   containerStyle,
   useGradient,
   currentSlide,
@@ -84,7 +84,7 @@ export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = (
   onUpgrade,
   showPaywallOnComplete,
   variant = "default",
-}) => {
+}: OnboardingScreenContentProps) => {
   const { themeMode } = useTheme();
 
   const hasMedia = !!currentSlide?.backgroundImage || !!currentSlide?.backgroundVideo;