@umituz/react-native-onboarding 3.3.9 → 3.3.11

package/package.json

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

@@ -1,8 +1,9 @@
-import React, { useMemo } from "react";
+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, AtomicButton, AtomicText } 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;
@@ -15,7 +16,6 @@ export interface OnboardingFooterProps {
   nextButtonText?: string;
   getStartedButtonText?: string;
   disabled?: boolean;
-  useGradient?: boolean;
 }
 
 export const OnboardingFooter = ({
@@ -29,11 +29,10 @@ export const OnboardingFooter = ({
   nextButtonText,
   getStartedButtonText,
   disabled = false,
-  useGradient = false,
 }: OnboardingFooterProps) => {
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
-  const tokens = useAppDesignTokens();
+  const { colors } = useOnboardingTheme();
 
   const buttonText = isLastSlide
     ? getStartedButtonText || t("onboarding.getStarted") || "Get Started"
@@ -45,8 +44,8 @@ export const OnboardingFooter = ({
     <View style={[styles.footer, { paddingBottom: insets.bottom + 24 }]}>
       {showProgressBar && (
         <View style={styles.progressContainer}>
-          <View style={[styles.progressBar, { backgroundColor: useGradient ? "rgba(255, 255, 255, 0.2)" : tokens.colors.borderLight }]}>
-            <View style={[styles.progressFill, { width: `${progressPercent}%`, backgroundColor: useGradient ? '#FFFFFF' : tokens.colors.primary }]} />
+          <View style={[styles.progressBar, { backgroundColor: colors.progressBarBg }]}>
+            <View style={[styles.progressFill, { width: `${progressPercent}%`, backgroundColor: colors.progressFillColor }]} />
           </View>
         </View>
       )}
@@ -58,10 +57,10 @@ export const OnboardingFooter = ({
               key={index}
               style={[
                 styles.dot,
-                { backgroundColor: useGradient ? "rgba(255, 255, 255, 0.4)" : tokens.colors.borderLight },
+                { backgroundColor: colors.dotColor },
                 index === currentIndex && {
                   width: 12,
-                  backgroundColor: useGradient ? '#FFFFFF' : tokens.colors.primary
+                  backgroundColor: colors.activeDotColor
                 }
               ]}
             />
@@ -73,9 +72,9 @@ export const OnboardingFooter = ({
         onPress={onNext}
         disabled={disabled}
         fullWidth
-        variant={useGradient ? "secondary" : "primary"}
-        style={useGradient && { backgroundColor: '#FFFFFF' }}
-        textStyle={useGradient && { color: tokens.colors.primary }}
+        variant="primary"
+        style={{ backgroundColor: colors.buttonBg }}
+        textStyle={{ color: colors.buttonTextColor }}
       >
         {buttonText}
       </AtomicButton>
@@ -83,7 +82,7 @@ export const OnboardingFooter = ({
       {showProgressText && (
         <AtomicText
           type="labelSmall"
-          style={[styles.progressText, { color: useGradient ? "rgba(255, 255, 255, 0.8)" : tokens.colors.textSecondary }]}
+          style={[styles.progressText, { color: colors.progressTextColor }]}
         >
           {currentIndex + 1} {t("general.of") || "of"} {totalSlides}
         </AtomicText>

package/src/presentation/components/OnboardingHeader.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
+import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface OnboardingHeaderProps {
   isFirstSlide: boolean;
@@ -10,7 +11,6 @@ export interface OnboardingHeaderProps {
   showBackButton?: boolean;
   showSkipButton?: boolean;
   skipButtonText?: string;
-  useGradient?: boolean;
 }
 
 export const OnboardingHeader = ({
@@ -20,13 +20,11 @@ export const OnboardingHeader = ({
   showBackButton = true,
   showSkipButton = true,
   skipButtonText,
-  useGradient = false,
 }: OnboardingHeaderProps) => {
   const { t } = useLocalization();
-  const tokens = useAppDesignTokens();
+  const { colors } = useOnboardingTheme();
 
   const skipText = skipButtonText || t("onboarding.skip") || "Skip";
-  const iconColor = useGradient ? "#FFFFFF" : tokens.colors.textPrimary;
 
   return (
     <View style={styles.header}>
@@ -37,15 +35,15 @@ export const OnboardingHeader = ({
           style={[
             styles.headerButton,
             {
-              backgroundColor: useGradient ? "rgba(255, 255, 255, 0.2)" : tokens.colors.surface,
-              borderColor: useGradient ? "rgba(255, 255, 255, 0.3)" : tokens.colors.borderLight,
+              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={iconColor} />
+          <AtomicIcon name="chevron-back" customSize={20} customColor={colors.iconColor} />
         </TouchableOpacity>
       ) : (
         <View style={styles.headerButton} />
@@ -54,7 +52,7 @@ export const OnboardingHeader = ({
         <TouchableOpacity onPress={onSkip} activeOpacity={0.7}>
           <AtomicText
             type="labelLarge"
-            style={[styles.skipText, { color: iconColor }]}
+            style={[styles.skipText, { color: colors.textColor }]}
           >
             {skipText}
           </AtomicText>

package/src/presentation/components/OnboardingSlide.tsx

@@ -1,49 +1,43 @@
 import React from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
-import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
 import type { OnboardingThemeVariant } from "../../domain/entities/OnboardingTheme";
+import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface OnboardingSlideProps {
   slide: OnboardingSlideType;
-  useGradient?: boolean;
   variant?: OnboardingThemeVariant;
 }
 
-const EMOJI_REGEX = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u;
-
 export const OnboardingSlide = ({
   slide,
-  useGradient = false,
   variant = "default"
 }: OnboardingSlideProps) => {
-  const tokens = useAppDesignTokens();
+  const { colors } = useOnboardingTheme();
 
-  const isEmoji = EMOJI_REGEX.test(slide.icon);
-  const isValidIconName = !isEmoji && typeof slide.icon === "string" && slide.icon.length > 0;
-  const iconColor = useGradient ? "#FFFFFF" : tokens.colors.primary;
-  const textColor = useGradient ? "#FFFFFF" : tokens.colors.textPrimary;
-  const subTextColor = useGradient ? "rgba(255, 255, 255, 0.8)" : tokens.colors.textSecondary;
+  const isEmoji = slide.iconType === 'emoji';
+  const hasIcon = slide.icon && slide.icon.length > 0;
   const iconSize = variant === "minimal" ? 80 : 72;
 
   return (
     <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false} bounces={false}>
       <View style={styles.slideContainer}>
-        {(isEmoji || isValidIconName) && (
+        {hasIcon && (
           <View style={styles.iconBox}>
             {isEmoji ? (
               <AtomicText style={{ fontSize: iconSize }}>{slide.icon}</AtomicText>
             ) : (
-              <AtomicIcon name={slide.icon} customSize={iconSize} customColor={iconColor} />
+              <AtomicIcon name={slide.icon} customSize={iconSize} customColor={colors.iconColor} />
             )}
           </View>
         )}
 
-        <AtomicText type="headlineMedium" style={[styles.title, { color: textColor }]}>
+        <AtomicText type="headlineMedium" style={[styles.title, { color: colors.textColor }]}>
           {slide.title}
         </AtomicText>
 
-        <AtomicText type="bodyLarge" style={[styles.description, { color: subTextColor }]}>
+        <AtomicText type="bodyLarge" style={[styles.description, { color: colors.subTextColor }]}>
           {slide.description}
         </AtomicText>
 
@@ -51,8 +45,8 @@ export const OnboardingSlide = ({
           <View style={styles.featuresContainer}>
             {slide.features.map((feature, index) => (
               <View key={index} style={styles.featureItem}>
-                <AtomicIcon name="checkmark-circle" size="sm" customColor={iconColor} />
-                <AtomicText type="bodyMedium" style={[styles.featureText, { color: textColor }]}>
+                <AtomicIcon name="checkmark-circle" size="sm" customColor={colors.iconColor} />
+                <AtomicText type="bodyMedium" style={[styles.featureText, { color: colors.textColor }]}>
                   {feature}
                 </AtomicText>
               </View>

package/src/presentation/components/QuestionSlide.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import type { OnboardingThemeVariant } from "../../domain/entities/OnboardingTheme";
 import { QuestionSlideHeader } from "./QuestionSlideHeader";
 import { QuestionRenderer } from "./QuestionRenderer";
+import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface QuestionSlideProps {
   slide: OnboardingSlide;
   value: any;
   onChange: (value: any) => void;
-  useGradient?: boolean;
   variant?: OnboardingThemeVariant;
 }
 
@@ -18,9 +18,8 @@ export const QuestionSlide = ({
   slide,
   value,
   onChange,
-  useGradient = false,
 }: QuestionSlideProps) => {
-  const tokens = useAppDesignTokens();
+  const { colors } = useOnboardingTheme();
   const { question } = slide;
 
   if (!question) return null;
@@ -28,7 +27,7 @@ export const QuestionSlide = ({
   return (
     <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false} bounces={false}>
       <View style={styles.slideContainer}>
-        <QuestionSlideHeader slide={slide} useGradient={useGradient} />
+        <QuestionSlideHeader slide={slide} />
 
         <View style={styles.questionContainer}>
           <QuestionRenderer question={question} value={value} onChange={onChange} />
@@ -37,7 +36,7 @@ export const QuestionSlide = ({
         {question.validation?.required && !value && (
           <AtomicText
             type="labelSmall"
-            style={[styles.requiredHint, { color: useGradient ? '#FFFFFF' : tokens.colors.error }]}
+            style={[styles.requiredHint, { color: colors.errorColor }]}
           >
             * This field is required
           </AtomicText>

package/src/presentation/components/QuestionSlideHeader.tsx

@@ -1,46 +1,41 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface QuestionSlideHeaderProps {
   slide: OnboardingSlide;
-  useGradient: boolean;
 }
 
-const isEmoji = (icon: string): boolean =>
-  /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
-
 export const QuestionSlideHeader = ({
   slide,
-  useGradient,
 }: QuestionSlideHeaderProps) => {
-  const tokens = useAppDesignTokens();
-  const textColor = useGradient ? "#FFFFFF" : tokens.colors.textPrimary;
-  const subTextColor = useGradient ? "rgba(255, 255, 255, 0.9)" : tokens.colors.textSecondary;
+  const { colors } = useOnboardingTheme();
+  const isEmoji = slide.iconType === 'emoji';
 
   return (
     <View style={styles.container}>
       <View style={[
         styles.iconContainer,
         {
-          backgroundColor: useGradient ? "rgba(255, 255, 255, 0.2)" : tokens.colors.primary + '15',
-          borderColor: useGradient ? "rgba(255, 255, 255, 0.4)" : tokens.colors.primary + '30',
+          backgroundColor: colors.iconBg,
+          borderColor: colors.iconBorder,
         }
       ]}>
-        {isEmoji(slide.icon) ? (
+        {isEmoji ? (
           <AtomicText style={{ fontSize: 48 }}>{slide.icon}</AtomicText>
         ) : (
-          <AtomicIcon name={slide.icon as any} customSize={48} customColor={textColor} />
+          <AtomicIcon name={slide.icon as any} customSize={48} customColor={colors.textColor} />
         )}
       </View>
 
-      <AtomicText type="headlineMedium" style={[styles.title, { color: textColor }]}>
+      <AtomicText type="headlineMedium" style={[styles.title, { color: colors.textColor }]}>
         {slide.title}
       </AtomicText>
 
       {slide.description && (
-        <AtomicText type="bodyMedium" style={[styles.description, { color: subTextColor }]}>
+        <AtomicText type="bodyMedium" style={[styles.description, { color: colors.subTextColor }]}>
           {slide.description}
         </AtomicText>
       )}

package/src/presentation/providers/OnboardingThemeProvider.tsx

@@ -0,0 +1,98 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+
+interface OnboardingColors {
+    iconColor: string;
+    textColor: string;
+    subTextColor: string;
+    buttonBg: string;
+    buttonTextColor: string;
+    progressBarBg: string;
+    progressFillColor: string;
+    dotColor: string;
+    activeDotColor: string;
+    progressTextColor: string;
+    headerButtonBg: string;
+    headerButtonBorder: string;
+    iconBg: string;
+    iconBorder: string;
+    errorColor: string;
+}
+
+interface OnboardingThemeValue {
+    colors: OnboardingColors;
+    useGradient: boolean;
+}
+
+const OnboardingTheme = createContext<OnboardingThemeValue | null>(null);
+
+export interface OnboardingThemeProviderProps {
+    children: React.ReactNode;
+    useGradient?: boolean;
+}
+
+export const OnboardingThemeProvider = ({
+    children,
+    useGradient = false,
+}: OnboardingThemeProviderProps) => {
+    const tokens = useAppDesignTokens();
+
+    const colors = useMemo<OnboardingColors>(() => {
+        if (useGradient) {
+            return {
+                iconColor: tokens.colors.surface,
+                textColor: tokens.colors.surface,
+                subTextColor: tokens.colors.surface + 'CC',
+                buttonBg: tokens.colors.surface,
+                buttonTextColor: tokens.colors.primary,
+                progressBarBg: tokens.colors.surface + '30',
+                progressFillColor: tokens.colors.surface,
+                dotColor: tokens.colors.surface + '60',
+                activeDotColor: tokens.colors.surface,
+                progressTextColor: tokens.colors.surface + 'CC',
+                headerButtonBg: tokens.colors.surface + '30',
+                headerButtonBorder: tokens.colors.surface + '50',
+                iconBg: tokens.colors.surface + '30',
+                iconBorder: tokens.colors.surface + '60',
+                errorColor: tokens.colors.surface,
+            };
+        }
+
+        return {
+            iconColor: tokens.colors.primary,
+            textColor: tokens.colors.textPrimary,
+            subTextColor: tokens.colors.textSecondary,
+            buttonBg: tokens.colors.primary,
+            buttonTextColor: tokens.colors.onPrimary,
+            progressBarBg: tokens.colors.borderLight,
+            progressFillColor: tokens.colors.primary,
+            dotColor: tokens.colors.borderLight,
+            activeDotColor: tokens.colors.primary,
+            progressTextColor: tokens.colors.textSecondary,
+            headerButtonBg: tokens.colors.surface,
+            headerButtonBorder: tokens.colors.borderLight,
+            iconBg: tokens.colors.primary + '15',
+            iconBorder: tokens.colors.primary + '30',
+            errorColor: tokens.colors.error,
+        };
+    }, [tokens, useGradient]);
+
+    const value = useMemo(
+        () => ({ colors, useGradient }),
+        [colors, useGradient]
+    );
+
+    return (
+        <OnboardingTheme.Provider value={value}>
+            {children}
+        </OnboardingTheme.Provider>
+    );
+};
+
+export const useOnboardingTheme = (): OnboardingThemeValue => {
+    const theme = useContext(OnboardingTheme);
+    if (!theme) {
+        throw new Error('useOnboardingTheme must be used within OnboardingThemeProvider');
+    }
+    return theme;
+};

package/src/presentation/screens/OnboardingScreen.tsx

@@ -12,6 +12,7 @@ import { StyleSheet } from "react-native";
 import type { OnboardingOptions } from "../../domain/entities/OnboardingOptions";
 import { useOnboardingScreenState } from "../hooks/useOnboardingScreenState";
 import { OnboardingScreenContent } from "../components/OnboardingScreenContent";
+import { OnboardingThemeProvider } from "../providers/OnboardingThemeProvider";
 
 export interface OnboardingScreenProps extends OnboardingOptions {
   /**
@@ -114,35 +115,37 @@ export const OnboardingScreen = ({
   }
 
   return (
-    <OnboardingScreenContent
-      containerStyle={[styles.container, containerStyle]}
-      useGradient={useGradient}
-      currentSlide={currentSlide}
-      isFirstSlide={isFirstSlide}
-      isLastSlide={isLastSlide}
-      currentIndex={currentIndex}
-      totalSlides={filteredSlides.length}
-      currentAnswer={currentAnswer}
-      isAnswerValid={isAnswerValid}
-      showBackButton={showBackButton}
-      showSkipButton={showSkipButton}
-      showProgressBar={showProgressBar}
-      showDots={showDots}
-      showProgressText={showProgressText}
-      skipButtonText={skipButtonText}
-      nextButtonText={nextButtonText}
-      getStartedButtonText={getStartedButtonText}
-      onBack={handlePrevious}
-      onSkip={handleSkip}
-      onNext={handleNext}
-      onAnswerChange={setCurrentAnswer}
-      renderHeader={renderHeader}
-      renderFooter={renderFooter}
-      renderSlide={renderSlide}
-      onUpgrade={onUpgrade}
-      showPaywallOnComplete={showPaywallOnComplete}
-      variant={themeVariant}
-    />
+    <OnboardingThemeProvider useGradient={useGradient}>
+      <OnboardingScreenContent
+        containerStyle={[styles.container, containerStyle]}
+        useGradient={useGradient}
+        currentSlide={currentSlide}
+        isFirstSlide={isFirstSlide}
+        isLastSlide={isLastSlide}
+        currentIndex={currentIndex}
+        totalSlides={filteredSlides.length}
+        currentAnswer={currentAnswer}
+        isAnswerValid={isAnswerValid}
+        showBackButton={showBackButton}
+        showSkipButton={showSkipButton}
+        showProgressBar={showProgressBar}
+        showDots={showDots}
+        showProgressText={showProgressText}
+        skipButtonText={skipButtonText}
+        nextButtonText={nextButtonText}
+        getStartedButtonText={getStartedButtonText}
+        onBack={handlePrevious}
+        onSkip={handleSkip}
+        onNext={handleNext}
+        onAnswerChange={setCurrentAnswer}
+        renderHeader={renderHeader}
+        renderFooter={renderFooter}
+        renderSlide={renderSlide}
+        onUpgrade={onUpgrade}
+        showPaywallOnComplete={showPaywallOnComplete}
+        variant={themeVariant}
+      />
+    </OnboardingThemeProvider>
   );
 };